0

私は、この記事で説明されているツリー構造と非常によく似たことを行っています。

http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

アイデアは、コレクション ビュー (TreeRoot) にルート ノードのコレクションを持ち、各ルート ノードには再帰的な複合ビュー (TreeView) もあります。記事のツリー構造の最も単純な作業例を示す jsFiddle は、次の場所にあります。

http://jsfiddle.net/hoffmanc/NH9J6/

ツリー構造のどこにあるかに関係なく、いくつかのオプションを各ツリー ビューに渡すことができるように、例を変更したいと考えています。これが私の(ごくわずかに変更された)jsFiddleです:

http://jsfiddle.net/QL4AE/1/

変更した例の 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 にオプションを渡すにはどうすればよいですか?

ありがとう!

4

1 に答える 1