私は、この記事で説明されているツリー構造と非常によく似たことを行っています。
http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
アイデアは、コレクション ビュー (TreeRoot) にルート ノードのコレクションを持ち、各ルート ノードには再帰的な複合ビュー (TreeView) もあります。記事のツリー構造の最も単純な作業例を示す jsFiddle は、次の場所にあります。
http://jsfiddle.net/hoffmanc/NH9J6/
ツリー構造のどこにあるかに関係なく、いくつかのオプションを各ツリー ビューに渡すことができるように、例を変更したいと考えています。これが私の(ごくわずかに変更された)jsFiddleです:
変更した例の JS コードは次のとおりです。
// The recursive tree view
var TreeView = Backbone.Marionette.CompositeView.extend({
template: "#node-template",
tagName: "li",
initialize: function(){
// grab the child collection from the parent model
// so that we can render the collection as children
// of this parent node
this.collection = this.model.nodes;
console.log(this.options.msg); // undefined!
},
appendHtml: function(cv, iv){
cv.$("ul:first").append(iv.el);
},
onRender: function() {
if(_.isUndefined(this.collection)){
this.$("ul:first").remove();
}
}
});
// The tree's root: a simple collection view that renders
// a recursive tree structure for each item in the collection
var TreeRoot = Backbone.Marionette.CollectionView.extend({
tagName: "ul",
itemView: TreeView
});
// ----------------------------------------------------------------
// Below this line is normal stuff... models, templates, data, etc.
// ----------------------------------------------------------------
treeData = [
{
nodeName: "top level 1",
nodes: [
{
nodeName: "2nd level, item 1",
nodes: [
{ nodeName: "3rd level, item 1" },
{ nodeName: "3rd level, item 2" },
{ nodeName: "3rd level, item 3" }
]
},
{
nodeName: "2nd level, item 2",
nodes: [
{ nodeName: "3rd level, item 4" },
{
nodeName: "3rd level, item 5",
nodes: [
{ nodeName: "4th level, item 1" },
{ nodeName: "4th level, item 2" },
{ nodeName: "4th level, item 3" }
]
},
{ nodeName: "3rd level, item 6" }
]
}
]
},
{
nodeName: "top level 2",
nodes: [
{
nodeName: "2nd level, item 3",
nodes: [
{ nodeName: "3rd level, item 7" },
{ nodeName: "3rd level, item 8" },
{ nodeName: "3rd level, item 9" }
]
},
{
nodeName: "2nd level, item 4",
nodes: [
{ nodeName: "3rd level, item 10" },
{ nodeName: "3rd level, item 11" },
{ nodeName: "3rd level, item 12" }
]
}
]
}
];
TreeNode = Backbone.Model.extend({
initialize: function(){
var nodes = this.get("nodes");
if (nodes){
this.nodes = new TreeNodeCollection(nodes);
this.unset("nodes");
}
}
});
TreeNodeCollection = Backbone.Collection.extend({
model: TreeNode
});
var tree = new TreeNodeCollection(treeData);
var treeView = new TreeRoot({
collection: tree,
itemViewOptions: {msg: 'hi'}
});
ご覧のとおり、itemViewOptions を使用してオプションを渡そうとしていますが、TreeView が初期化されると、そこにはありません。これは、TreeRoot だけが itemViewOptions を取得しているためだと思います。
私の質問は: TreeRoot から TreeView にオプションを渡すにはどうすればよいですか?
ありがとう!