拖放模型后重新排序集合

时间:2014-02-24 20:46:40

标签: jquery jquery-ui backbone.js requirejs

我在以前的stackoverflow查询中使用以下代码作为拖放模型后立即重新排序集合的基础: Saving jQuery UI Sortable's order to Backbone.js Collection

一切正常,直到我决定使用Require.js来模块化我的代码。这是我面临的问题。

我有一个由一些模型组成的集合。 ElementView是负责渲染每个模型的视图。 FormView是接收此集合并迭代每个模型并附加html的视图。所以在FormView我需要ElementView来解决这个问题。我还在sortable的初始化中初始化了FormView

$( ".sortable" ).sortable({                  
    stop: function(event, ui) {                 
        ui.item.trigger('drop', ui.item.index());
    }
});

当用户拖放元素时,可排序的jquery api会触发一个函数“drop”,它会在ElementView中捕获。

drop: function(event, index){                   
    this.$el.trigger("update-sort", [this.model, index]);
},

ElementView触发名为updateSort的更改以及模型本身及其移动到的位置,该更改应由FormView中的函数处理这样

updateSort: function(event, model, position) {       
    this.collection.remove(model);              
    this.collection.each(function (model, index) {                          
        var ordinal = index;
        if (index >= position)
            ordinal += 1;
        model.set('ordinal', ordinal);
    });            

    //model.set('ordinal', position);
    this.collection.add(model, {at: position});     
    console.log(this.collection.toJSON());            
},              

问题似乎是即使ElementView触发updateSort更改,它实际上也从未由FormView处理,因此重新排序从未发生过。我不确定模块化代码是否导致了这个问题。看起来ElementView无法到达FormView。我没有按照FormView中的要求添加ElementView,因为从技术上讲,它不是必需的。我不知道如何处理这个问题。有什么想法或建议吗?

1 个答案:

答案 0 :(得分:0)

所以我一直在读这个问题,我决定使用本文中描述的均匀聚合器模式 http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/

我不是百分之百确定如果这是正确的方法,但它是一个简单的解决方案,它的确有效!

任何人都有更好的想法,请分享..