Ember.js - 拖放列表

Question

我使用了this question的示例來創建我可以在Web應用程序上使用的拖放腳本。

在爲我自己的目的重新設計之後，我想實現一些功能。 我一直在試圖爲自己一段時間，但我還沒有找到soulution尚未...

相關的jsfiddle：http://jsfiddle.net/BLLTH/

特點：

• 已經添加的對象應被刪除從可用列表中

• 通過點擊一個「x」碼元，這使回可用列表

去除添加的對象個

• 對象必須在相同的順序添加

什麼想法？ =）

模板：

<script type="text/x-handlebars" > 
<b>Available Objects</b><br /><br /> 
{{#each App.objectsController}} 
    {{#view App.ObjectView contentBinding="this"}} 
     {{view.content.name}}<br /> 
    {{/view}} 
{{/each}} 
<br /><br /><br /><br /> 
{{#view App.ObjectDropTarget dragContextBinding="App.objectsController.currentDragItem"}} 
    {{#each App.cartController}} 
     {{#view App.ObjectView contentBinding="this" class="single"}}     
      {{view.content.name}} 
     {{/view}} 
    {{/each}} 
{{/view}} 

的javascript：

App = Em.Application.create({}); 
DragNDrop = Em.Namespace.create(); 
DragNDrop.cancel = function(event) { 
    event.preventDefault(); 
    return false; 
}; 
DragNDrop.Draggable = Em.Mixin.create({ 
    attributeBindings: 'draggable', 
    draggable: 'true', 
    dragStart: function(event) { 
     var dataTransfer = event.originalEvent.dataTransfer; 
     dataTransfer.setData('Text', this.get('elementId')); 
    } 
}); 
DragNDrop.Droppable = Em.Mixin.create({ 
    dragEnter: DragNDrop.cancel, 
    dragOver: DragNDrop.cancel, 
    drop: function(event) { 
     event.preventDefault(); 
     return false; 
    } 
}); 
App.Object = Em.Object.extend({ 
    name: null, 
    isAdded: null 
}); 
App.ObjectView = Em.View.extend(DragNDrop.Draggable, { 
    tagName: 'div', 
    // .setDragImage (in #dragStart) requires an HTML element as the first argument 
    // so you must tell Ember to create the view and it's element and then get the 
    // HTML representation of that element. 
    dragStart: function(event) { 
     this._super(event); 
     // Let the controller know this view is dragging 
     this.setPath('content.isDragging', true); 
     // Set the drag image and location relative to the mouse/touch event  
    }, 
    dragEnd: function(event) { 
     // Let the controller know this view is done dragging 
     this.setPath('content.isDragging', false); 
    } 
}); 
App.ObjectDropTarget = Em.View.extend(DragNDrop.Droppable, { 
    tagName: 'div', 
    classNames: ['dropTarget'], 
    classNameBindings: ['cartAction'], 
    // This will determine which class (if any) you should add to 
    // the view when you are in the process of dragging an item. 
    drop: function(event) { 
     var viewId = event.originalEvent.dataTransfer.getData('Text'), 
     view = Em.View.views[viewId]; 
     // Set view properties 
     // Must be within `Ember.run.next` to always work 
     Em.run.next(this, function() { 
      view.setPath('content.isAdded', !view.getPath('content.isAdded')); 
     }); 
     return this._super(event); 
    } 
}); 
App.objectsController = Em.ArrayController.create({ 
    content: [ 
    App.Object.create({ 
     name: "Object 1", 
     isAdded: false 
    }), 
    App.Object.create({ 
     name: "Object 2", 
     isAdded: false 
    }), 
    App.Object.create({ 
     name: "Object 3", 
     isAdded: false 
    }), 
    App.Object.create({ 
     name: "Object 4", 
     isAdded: false 
    }) 
    ], 
    currentDragItem: Em.computed(function(key, value) { 
     return this.findProperty('isDragging', true); 
    }).property('@each.isDragging').cacheable(), 
    objectsInCart: Em.computed(function(key, value) { 
     return this.filterProperty('isAdded', true); 
    }).property('@each.isAdded').cacheable() 
}); 
App.cartController = Em.ArrayController.create({ 
    content: Em.computed(function(key, value) { 
     var cartItems = this.get('cartItems'); 
     if (!Em.empty(cartItems)) { 
      // Sort desc by name 
      return cartItems.sort(function(a, b) { 
       if ((a.get('name').toLowerCase()) < (b.get('name').toLowerCase())) return -1; 
       else return 1; 
      }); 
     } 
    }).property('cartItems').cacheable(), 
    cartItemsBinding: 'App.objectsController.objectsInCart' 
});​ 

Answer 1

我在這裏實現了前兩個功能供您http://jsfiddle.net/QE9CS/

「已添加的對象應從可用列表中刪除「是通過在你的數組上創建另一個計算屬性。 「通過點擊」x「 - 符號，將其放回到可用列表中去除添加的對象」僅使用標準的Ember {{action}}幫助器。

編輯：

完整版http://jsfiddle.net/R9hnY/ 我已經把isAdded成設置對象的價值和添加或刪除從cartController的在正確的時間內容的對象一個計算屬性。從而給cartController一個有序的對象數組來渲染。