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一个有序的对象数组来渲染。