CODEWITHSUNDEEP
ember.js
mightybyte
mightybyte

Reputation: 7282

Update an ember.js view when content is dropped

I'm trying to implement drag and drop with Ember.js. I have everything working except getting the view to update at the end. Here's a jsfiddle:

http://jsfiddle.net/rsaNy/

If you drag something from the source list and drop it in the dest div, I want it to be added to the display. The two alerts that I have set up confirm that the data structures are actually being updated, but the update is not being reflected in the view. How do I solve this? Here's the code.

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"}] }
});

Upvotes: 2

Views: 501

Answers (1)

CraigTeegarden
CraigTeegarden

Reputation: 8251

You need to use the Ember Array pushObject() method instead of push(). This allows Ember to keep track of the data changes for it's binding system, which is how the view knows to update itself. It is the same idea of having to use get() and set() all the time.

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

Here is the working JSFiddle

Upvotes: 3

Related Questions