骨干木偶复合视图在集合排序后无法正确呈现答案

【问题标题】：backbone marionette compositeview doesn't render properly after collection sort骨干木偶复合视图在集合排序后无法正确呈现
【发布时间】：2013-06-13 17:50:34
【问题描述】：

这是我的 JS 代码

var mainApp = new Backbone.Marionette.Application();

mainApp.addRegions({        
        mainRegion: "#main-region"
});

var UserModel = Backbone.Model.extend();

var UserView = Backbone.Marionette.ItemView.extend({
    tagName: 'div',
    className: 'user-item',
    template: '#user-item-tpl'
});

var UserCollection = Backbone.Collection.extend({
    model: UserModel,
    sortKey: 'id',
    comparator: function(item1, item2){
        item1 = item1.get(this.sortKey);
        item2 = item2.get(this.sortKey);
        return item1 > item2 ? 1 : (item1 < item2 ? -1 : 0);
    },
    sortByID: function(){
        this.sort();
    }
});

var UserListView = Backbone.Marionette.CompositeView.extend({
    className: 'user-view',
    tagName: 'div',
    itemView: UserView,
    itemViewContainer: '.user-list',
    events: {
        'click .btn' : 'doSort'
    },
    collection: new UserCollection([
        {id: 3, name: 'Peter'},
        {id: 1, name: 'Tom'},
        {id: 2, name: 'Mary'}
    ]),
    initialize: function(){

    },
    onShow: function(){

    },
    appendHtml: function(collectionView, itemView, index){
        $(this.itemViewContainer).append(itemView.el);
    },
    render: function(){
        this.template = _.template($('#user-view-tpl').html());
        this.$el.html(this.template());
        return this;
    },
    doSort: function(){
        this.collection.sortByID();
        this.collection.trigger('reset');
        console.log(this.collection.toJSON());
    }
});

mainApp.mainRegion.show(new UserListView());

这是html

<div id="main-region"></div>

<script id="user-view-tpl" type="text/template">
    <div class="user-list"></div>
    <a class="btn">SORT</a>
</script>

<script id="user-item-tpl" type="text/template">
    <%= id %> | <%= name %>
</script>

每当我通过单击“排序”按钮触发 doSort() 函数时，我可以看到集合已正确排序，但复合视图不会对“休息”做出反应并一直显示错误的顺序。

如何让复合视图自动响应 sort()？

PS：我认为我的代码看起来不错，但它可以在 jsfiddle 上运行，可以给我一些指导。谢谢。

jsFiddle：http://jsfiddle.net/chitocheng/fad8U/

【问题讨论】：

标签： sorting backbone.js marionette backbone-views backbone.js-collections

【解决方案1】：

这是您修改后代码的一个工作示例：http://jsfiddle.net/AUZrY/1/

您的原始代码存在一些问题：

您的复合视图没有模板（我将其更改为集合视图）
由于您没有模板，因此您的appendHtml 无法附加子视图
您无需使用 Marionette 自己渲染视图，尤其是替换其 html
您有多个具有相同 ID 的模型

【讨论】：

谢谢大卫。但是，我需要排序功能来触发按钮/链接点击。而且我没有提示您在脚本中调用排序函数的位置。请指教。
我已经更新了 jsfiddle。你有一个比较器，这意味着集合会自动排序。在我编写的代码中，比较器仅在您单击链接时设置。这不是生产质量代码，仅用于向您展示排序的工作原理。