这是小提琴：
代码在下面。制作一个聊天应用程序，需要一个排序的、连接的用户列表。具有连接到 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 木偶方法可以在每次击键时对用户列表进行添加和过滤，而无需渲染重复的模型。如果我这样做，我会更新。但我只是认为，如果没有这件作品，这里的收藏/观看债券的好处是无法完全实现的。我在 AS3 中以最小的难度做到了这一点。
我认为真正的答案是视图应该准确地表示模型的状态。如果模型已添加并已排序，则视图应反映这一点。重复的模型渲染感觉就像一个错误。
更新：
边走边学。您必须在覆盖中准确指定您希望内容去向的位置。因此，我的 'ul' itemViewContainer 不再相关。所以对我来说最终的答案是：
- 抛弃 itemViewContainer
- 覆盖 appendHtml 以明确告诉我的 CompositeView 我的用户 ul 在哪里，并根据排序顺序按索引插入用户
- 抛弃我的“添加”collectionEvent 和处理程序
呼...