Question

I have an Ember.js app that has a Checklist model, where each Checklist has many Checkitems. (A variant of the classic ToDo app, but with multiple TodoLists.)

In the top-most view, the user sees a listing of all available checklists to the left. When a checklist is selected, the corresponding checkitems appear to the right.

The checkitems on the right side are drag sortable. I’m using this html5sortable library to handle drag sorting. It’s like the classic jQueryUI version, but less clunky.

Upon initial loading of the app, the sortable list works fine. However, if the list of checkitems changes (either because a checkitem is marked as complete, a new checkitem is added, changes to an existing check item are saved, or another checklist is selected on the left), the binding to html5sortable is lost.

When the app first loads, I have a view called App.CheckitemsPendingTableView:

App.CheckitemsPendingTableView = Ember.View.extend({
  templateName: 'app/templates/checkitems/checkitemsPendingTable',
  classNames: ['checkitems-list', 'sortable', 'list'],
  tagName: 'ul',

  didInsertElement: function() {
    this._super();
    $('ul.sortable').sortable();
    console.log('CheckitemsPendingTableView has been inserted in the DOM and is bound to sortable.  At this point, drag-sorting of the list is working fine.');
  }
});

The corresponding template is called checkitemsPendingTable.handlebars and it looks like this:

{{#each content}}
  {{view App.CheckitemSingleView checkitemBinding="this"}}
{{/each}}

And for good measure, the controller that feeds the content attribute for that view is App.checkitemsController.remainingItems:

App.checkitemsController = Ember.ArrayProxy.create({
  content:[],

  ...snip...

  remainingItems: function() {
    var checkitems = this.get('content');
    var sortedCheckitems = checkitems.filterProperty('isDone', false).sort(function(a,b) {
                            return a.get('position') - b.get('position');
                          });
    return sortedCheckitems;
  }.property('[e-mail]'),

  ...snip...

});

The content attribute of the checkitemsController is driven by the checklistsController:

App.checklistsController = Ember.ArrayProxy.create({
  content: App.store.findAll(App.Checklist),

  selectedChanged: function() {
    var checklist = this.get('selected');
    var checkitems = checklist.get('checkitems');
    App.checkitemsController.set('checklist', checklist);
    App.checkitemsController.set('content', checkitems);
  }.observes('selected')
});

(You may have noticed that this controller pulls its data from a Rails backend via ember-data. This shouldn’t matter for the current issue, though.)

The view for the left-hand side’s menu is called checklistsView. It has a child view called checklistSingleView that is rendered for each of the checklists:

App.ChecklistSingleView = Ember.View.extend({
  templateName: 'app/templates/checklists/checklistSingle',
  classNames:   ['menu-item'],
  tagName: 'tr',

  ...snip...

  chooseList: function() {
    var checklists = App.checklistsController.get('content');
    checklists.setEach('isActive', false);
    var checklist = this.get('checklist');
    checklist.set('isActive', true);
    App.checklistsController.set('selected', checklist);
  }

  ...snip...

});

And, finally, the corresponding template checklistSingle.handlebars contains a link that is tied to the chooseList by way of an action:

<a href="#" {{action "chooseList"}}>{{checklist.name}}</a>

So, everything above works brilliantly…until the user causes a change to the ul of checkitems on the right. At that point, the binding to html5sortable is lost, and I cannot find a convenient place to refresh it.

The problem is that didInsertElement is not called again for the view that generates that ul (i.e., CheckitemsPendingTableView). When the checklistController’s content attribute changes, the child views dutifully adjust to reflect the currently-selected list of checkitems. However, the original binding to sortable() is lost, and there is no apparent hook for re-binding to sortable() via jQuery.

I can’t re-bind on the child view of CheckitemsPendingTableView, since that would repeat for every instance of a checkitem in the currently-selected list. I can’t rebind from the controllers or models, since they will attempt to bind before the DOM update is completed.

I’m sure I’m just thinking about this incorrectly. I’m new to Ember.js (if it isn’t wildly obvious), and am struggling to understand how this case is properly handled.

UPDATE

I solved this problem, by adding the following function and observer to the App.CheckitemsPendingTableView:

resetSortableTable: function() {
    $('.sortable').unbind('sortable');
    $('.sortable').sortable();
    console.log('Sort reset by CheckitemsPendingTableView');
  },

itemsChanged: function() {
    console.log('itemsChanged caught in CheckitemsPendingTableView');
    // flush the RunLoop so changes are written to DOM
    Ember.run.sync();
    Ember.run.next(this, function() {
        this.resetSortableTable();
    });
  }.observes('content.@each')

I based my solution on this answer. I’m a little worried that it’s not a great solution, since it seems to be making assumptions about the DOM completing during a run loop iteration.

Answer 1

Whoa! Kind of detailed question…

I think your issue comes from html5sortable plugin: it uses JQuery’s bind method to attach handlers directly on living elements. As those elements disappear/evolve under Ember control, the binding are lost.

The plugin should better use JQuery’s on method to bind handlers, as specified in the documentation.