2

我正在尝试使用 Ember.js 实现拖放。除了让视图在最后更新之外，我一切正常。这是一个jsfiddle：

http://jsfiddle.net/rsaNy/

如果您从源列表中拖动某些内容并将其放在 dest div 中，我希望将其添加到显示中。我设置的两个警报确认数据结构实际上正在更新，但更新没有反映在视图中。我该如何解决这个问题？这是代码。

DragNDrop = Ember.Namespace.create();

DragNDrop.cancel = function(event) {
    event.preventDefault();
    return false;
};

App = Ember.Application.create();

testItems =
  [ { name: "Alpha" } ,
    { name: "Bravo" } ,
    { name: "Charlie" } ];

App.SourceItemView = Ember.View.extend({
  templateName: 'sourceItem',
  tagName: 'li',
  attributeBindings: 'draggable',
  draggable: 'true',
  dragStart: function(event) {
      var dataTransfer = event.originalEvent.dataTransfer;
      var msg = this.get('content');
      dataTransfer.setData('text', JSON.stringify(msg));
  }
});

App.SourceView = Ember.View.extend({
  templateName: 'source',
  tagName: 'div',
  classNames: ['well']
});

App.DestView = Ember.View.extend({
  templateName: 'dest',
  tagName: 'div',
  classNames: ['well'],
  dragEnter: DragNDrop.cancel,
  dragLeave: DragNDrop.cancel,
  dragOver: DragNDrop.cancel,
  drop: function(event) {
      var c = this.get('content');
      var fieldStr = event.originalEvent.dataTransfer.getData('text');
      alert(fieldStr);
      c.push(JSON.parse(fieldStr));

      var str = '';
      for (var i = 0; i < c.length; i++) {
        str += c[i].name+' ';
      }
      alert(str);

      return true;
  }
});

App.IndexController = Ember.ObjectController.extend({
  content: { source: testItems,
             dest: [{name: "Delta"}] }
});
4

1 回答 1

3

您需要使用Ember ArraypushObject()方法而不是push(). 这允许 Ember 跟踪其绑定系统的数据更改，这是视图知道如何更新自身的方式。必须始终使用相同的get()想法set()。

drop: function(event) {
      var c = this.get('content');
      var fieldStr = event.originalEvent.dataTransfer.getData('text');
      alert(fieldStr);
      c.pushObject(JSON.parse(fieldStr));
      //...

这是工作的 JSFiddle

于 2013-07-12T20:11:35.237 回答