在jQuery事件处理程序闭包中使用Ember.js模型

Question

I'm trying to create a sortable list of items. At this moment I'm using jQuery sortable for this. The list is created using an Ember view. When an item is dropped I would like the Ember model to be updated with the new order. At a later stage I would like to save this back to the server.

In the code below you can see how I've attached the jQuery code to the view elements. Dragging itself works perfectly and the stop function is also called.

Scrum.Sortable  = Ember.View.extend({
tagName :   'div',
didInsertElement:   function(){
    this.$().sortable({
        placeholder: "ui-state-highlight",
        stop:function(){
            var order   = 1;
            $('div.pb-item').children().each(function(index){
                $(this).find('.order').each(function(){
                    //
                    // Access and save the model here
                    //
                    $(this).html(order++);
                });
            });
        }
    });

}
});

You can also see I manually update the view html. This is what I would like to store in the model. Unfortunatly I can't seem to access the model.

Any ideas on how to do this are greatly appreciated.

Thanks.

Answer 1

Just save a reference to your controller outside the function so that the variable is visible in the closure. Then you'll have access to the controller and hence your model, etc.

didInsertElement: function() {
  controller = this.get('controller')
  ...
    $(this).find('.order').each(function(){
      // Here you have access to the controller variable.
    });
  ...
}

Since the controller generally stays the same throughout the whole life of the view, this is safe, and is better than saving a reference to your model itself, because your model may change.

Answer 2

You can access the controller and from the controller the model.

this.get('controller').get('model') or you can also pass a context to your view, which could be your model. {{view Scrum.Sortable context=this}}