さまざまなカードのセットをリストするバックボーン/マリオネット アプリケーションを構築しています。レイアウトには、新しいセットを追加するための入力フィールドを含む左側の ItemView と、カード セットを一覧表示するための右側の CompositeView があります。
Cards.module("Set.SideBar", function(SideBar, App) {
SideBar.SideBarView = Backbone.Marionette.ItemView.extend({
template: "#set-sideBar",
className: "well sidebar-nav",
ui: {
saveBtn: "a.saveSet",
setName: "input[type=text]"
},
events: {
"click .saveSet": "saveSet"
},
saveSet: function(ev) {
ev.preventDefault();
var newSetName = this.ui.setName.val().trim();
var newSet = new Cards.Entities.Set({ name: newSetName });
newSet.save();
// How to add the model to the collection?
}
});
});
以下の CompositeView のコレクションにnewSetを追加する最良の方法を探しています。それに対処するためのクリーンな低カップリングソリューションはありますか? 私はbackbone.jsを初めて使用し、これがまったく異常なことだとは想像できませんが、どういうわけか、関連ドキュメントで私の質問に対する答えを見つけることができません-または単にそれらを理解していません.
Cards.module('Set.List', function(List, App) {
List.SetItemView = Backbone.Marionette.ItemView.extend({
tagName: "tr",
template: "#set-list-item"
});
List.SetView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
className: "table table-bordered table-striped table-hover",
template: "#set-list",
itemView: List.SetItemView,
itemViewContainer: "tbody",
modelEvents: {
"change": "modelChanged"
},
initialize: function() {
this.collection.fetch();
}
});
});
あなたの助けを前もってありがとう!
私は今それをどのようにやっていますか:
両方の答えに感謝します。彼らは私を正しい方向に導いてくれました。collection.create ヒントも非常に役に立ち、私が直面していた別の問題を解決しました!
Marionette.Controller 内で、次のようなことを行い、コレクション参照を共有するだけです。
var setLayout = new Cards.Set.Layout();
Cards.mainRegion.show(setLayout);
var sets = new Cards.Entities.SetCollection();
var listView = new Cards.Set.List.SetView({ collection: sets });
setLayout.listRegion.show(listView);
var sideBarView = new Cards.Set.SideBar.SideBarView({ collection: sets });
setLayout.sideBarRegion.show(sideBarView);
新しいモデルは、.save() と .add() の代わりに collection.create によって単純に追加されます。