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

Question

这是 fiddle :

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

代码在下面。制作聊天应用程序并需要一个排序的、已连接的用户列表。带有连接到 CompositeView 的名称上的比较器的图集应该这样做。我在这里的实现中做错了什么吗？

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>

java 脚本:

    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 Marionette 方式来排序添加 和 在每次击键时过滤用户列表，而无需渲染重复的模型。如果我这样做，我会更新。但我只是认为没有这件作品，这里的收藏/观看债券的好处是无法完全实现的。我在 AS3 中以最小的难度做到了这一点。

我认为真正的答案是 View 应该准确地表示模型的状态。如果模型有添加项并进行了排序，则 View 应该反射(reflect)这一点。重复模型渲染感觉就像一个错误。

更新:

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

抛弃 itemViewContainer

覆盖 appendHtml 以明确告诉我的 CompositeView 我的用户 ul 在哪里，并根据排序顺序按索引插入用户

抛弃我的“添加”集合事件和处理程序

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

呼...

Answer 1

您的 doSort()函数，触发 reset是什么诀窍。如果您将其注释掉，它只会生成 View 的一个副本。
使用 comparator()功能对模型进行排序，每次添加时不要重置列表。
更新
在添加模型时进行排序的更多想法在这里解释:
The best way to sort a collection in a CompositeView
我用了 appendHTML这篇文章中的扩展示例在我自己的应用程序中成功(对问题的第一个回答)。