Backbone Marionette CompositeView 排序列表 - 在添加时呈现额外的模型

Question

这是小提琴：

http://jsfiddle.net/QhQ8D/10/

代码在下面。制作一个聊天应用程序，需要一个排序的、连接的用户列表。具有连接到 CompositeView 的名称的比较器的 Figd Collection 应该这样做。我在这里的实现中做错了吗？

HTML：

    <div>Enter user name and hit add user to build your list</div>
    <div id="divadduser">
        <input id="inputusername"/>
        <input id="buttonadduser" type="button" value="add user"/>
    </div>

    <div id="divusers"></div>

JAVASCRIPT：

    var nextAvailableUserId = 0;

    //Define a region to show a list of users 
    var userListRegion = new Backbone.Marionette.Region({ el: '#divusers'});

    var ConnectedUserModel = Backbone.Model.extend();

    //Make a user item view
    var UserView = Backbone.Marionette.ItemView.extend({
        template: Handlebars.compile(
            '<a id="{{id}}">{{name}}</a>'        
        ),
        tagName: "li",   
    });

    //Define a user collection
    var UserCollection = Backbone.Collection.extend({
        model: ConnectedUserModel,
        comparator: "name"
    });

    //Make a user collection instance
    var collConUsers = new UserCollection();                   

    //Define a composite user list view 
    var UserListView = Backbone.Marionette.CompositeView.extend({
        template: Handlebars.compile(
           '<ul id="ulusers"></ul>'
        ),

        itemView: UserView,
        itemViewContainer: 'ul',

        collectionEvents: {
            "add": "doSort"
        },

        doSort: function () {
            this.collection.trigger('reset');
        }
    });

    //Make a composite user list view instance
    var view = new UserListView({
        collection: collConUsers                        
    });

    //Show the view
    userListRegion.show(view);

    //Handle add user button click
    $('#buttonadduser').click(function () {    
        var uName = $("#inputusername").val();
        if (uName.length > 0) {
            nextAvailableUserId += 1;
            collConUsers.add([{ id: nextAvailableUserId, name: uName }]);        
            $("#inputusername").val('');
        }
    });

更新：

我将此标记为已回答，但以下解决方案不是最佳解决方案。本质上，它覆盖了 CollectionView 或 CompositeView appendHtml 的方式。从技术上讲，这有助于解决此线程中描述的问题，但似乎会产生其他问题。就我而言，我的用户列表上还有一个 JQuery 过滤器（像这样 - http://kilianvalkhof.com/uploads/listfilter/）。此覆盖会破坏该过滤器。还不知道为什么。如果我发现为什么我会更新这篇文章。

在这几天之后，我发现没有可靠的 BB 木偶方式可以在每次击键时对用户列表添加 AND 过滤器进行排序，而不会呈现重复的模型。如果我这样做，我会更新。但我只是认为，如果没有这件作品，这里的收藏/观看债券的好处是无法完全实现的。我在 AS3 中以最小的难度做到了这一点。

我认为真正的答案是视图应该准确地表示模型的状态。如果模型已添加并已排序，则视图应反映这一点。重复的模型渲染感觉就像一个错误。

更新：

边走边学。您必须在覆盖中准确指定您希望内容去向的位置。因此，我的 'ul' itemViewContainer 不再相关。所以我的最终答案是：

1. 抛弃 itemViewContainer
2. 重写 appendHtml 以明确告诉 CompositeView 我的用户 ul 在哪里，并根据排序顺序按索引插入用户
3. 放弃我的“添加”collectionEvent 和处理程序

http://jsfiddle.net/QhQ8D/29/

呼……

Answer 1

你的doSort() 函数，触发reset 是什么诀窍。如果您将其注释掉，它只会生成一份视图副本。

使用comparator()函数对模型进行排序，不要每次添加都重置列表。

更新

这里解释了更多关于在添加模型时进行排序的想法：

The best way to sort a collection in a CompositeView

我在自己的应用中成功使用了这篇文章中的appendHTML 扩展示例（对问题的第一个回复）。