2

Ember.js でドラッグ アンド ドロップを実装しようとしています。最後にビューを更新することを除いて、すべてが機能しています。ここにjsfiddleがあります：

http://jsfiddle.net/rsaNy/

ソースリストから何かをドラッグして dest div にドロップすると、表示に追加されるようにしたいです。私が設定した 2 つのアラートは、データ構造が実際に更新されていることを確認しますが、更新はビューに反映されていません。これを解決するにはどうすればよいですか？これがコードです。

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 に答える