1

这是我的 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>

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

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

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

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

4

1 回答 1

7

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

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

  • 您的复合视图没有模板（我将其更改为集合视图）
  • 由于您没有模板，因此您appendHtml无法附加子视图
  • 你不需要用 Marionette 自己渲染视图，尤其是替换他们的 html
  • 您有多个具有相同 ID 的模型
于 2013-06-13T18:40:47.727 回答