フィドルは次のとおりです。
コードは下にあります。チャット アプリを作成しており、並べ替えられた接続済みのユーザー リストが必要です。CompositeView にフックされた名前のコンパレータを使用した Figured 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>
ジャバスクリプト:
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 の場所を伝え、ソート順に従ってインデックスでユーザーを挿入します
- 私の「追加」コレクションイベントとハンドラーを捨てる
ふぅ…