在 ember 中，如何将视图数据从拖放中传递？答案

【问题标题】：In ember, how do I pass view data from a drag into a drop?在 ember 中，如何将视图数据从拖放中传递？
【发布时间】：2012-09-24 23:08:10
【问题描述】：

我正在使用 ember latest 和 jquery.ui 的 Draggable 和 Droppable。我还使用了一些有才华的 ember 人创建的 mixin，用于在 ember 中创建 Draggable 和 Droppable 视图。这是小提琴：

http://jsfiddle.net/inconduit/6n49N/7/

我需要将视图的内容附加到拖动事件，以便我可以在放置事件中访问它。直接使用 jquery，我知道你会这样做 $(..).draggable({ .. }).data("myData","some data here");但我不知道如何在这个 ember 实现中引用视图的内容。

这是小提琴中 App.Draggable 的一个 sn-p：

  App.Draggable = JQ.Draggable.extend({
     appendTo: 'body',
     helper: function() {
          $(this).data("myData","this is where actual data would go");

JQ.Draggable 扩展了 Ember.View。在 helper() 函数内部，'this' 指的是实际的 DOM 元素，我不知道如何引用 View 的变量。我想传递视图的内容，以便可以在此处检索它：

  App.Droppable = JQ.Droppable.extend({
      drop: function(event,ui) {
          alert('Dropped! ' + $(ui.draggable).data("myData"));

可拖动的模板如下所示：

  {{#view App.Draggable contentBinding="App.anObject"}}Drag me{{/view}}

我想传递该内容。请看fiddle，相关函数在javascript底部定义。

【问题讨论】：

标签： drag-and-drop ember.js

【解决方案1】：

在这里回答我自己的问题。

我在 didInsertElement 回调中附加了如下数据：

App.DraggableDataView = App.Draggable.extend({
    didInsertElement: function() {
        this._super();
        var element = this.get('element');
        $(element).data('myData',this.get('content'));
    },
});

【讨论】：

你如何在验收测试中测试拖放？