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

0

由于 UI 要求（需要在表中包含树），我们最终采用了一些不同的实现。我们正在使用一个名为 treetable 的 jQuery 插件在表中创建树。在下面的示例代码中，集合视图只是一组项目视图（项目视图直接附加到 DOM）。每个有子节点的节点都会为它们创建一个新的集合视图。ItemView el 需要附加到的 jQuery 对象被传递给每个 ItemView。

Javascript：

var NodeView = Backbone.Marionette.ItemView.extend({
    tagName: "tr",
    template: "#node-template",

    onRender: function() {

        var parent   = this.model;
        var children = parent.nodes;
        var table    = this.options.table;

        if (!table) {
            throw "No table element passed. Nowhere to append rows!";
        }

        table.append(this.el);

        if (children !== undefined) {
            // create and render new collection view for children nodes
            var childrenView = new TreeRoot({
                collection: children,
                parent: parent,
                table: table
            });
            childrenView.render();
        }
    }
});


var TreeRoot = Backbone.Marionette.CollectionView.extend({
    itemView: NodeView,

    itemViewOptions: function() {
        return {
            table: this.options.table
        }
    },

    appendHtml: function(collectionView, itemView, index){

        /*
        * Set custom attributes needed by TreeTable jQuery plugin
        */

        var model = itemView.model;
        $(itemView.el).attr("data-tt-id", model.get("nodeName"));

        var parent = collectionView.options.parent;
        if (parent !== undefined) {
            $(itemView.el).attr("data-tt-parent-id", parent.get("nodeName"));
        }
    }

});



// ----------------------------------------------------------------
// 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 table = $('#tree');

var treeView = new TreeRoot({
    collection: tree,
    table: table
});

treeView.render();

table.treetable({ expandable: true });

HTML：

<html>
    <head>
        <link href="https://raw.github.com/ludo/jquery-treetable/master/stylesheets/jquery.treetable.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://raw.github.com/ludo/jquery-treetable/master/stylesheets/jquery.treetable.theme.default.css">
    </head>
    <body>
        <script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="https://raw.github.com/documentcloud/backbone/master/backbone-min.js"></script>
        <script src="https://raw.github.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.js"></script>
        <script src="https://raw.github.com/ludo/jquery-treetable/master/javascripts/src/jquery.treetable.js"></script>

        <script id="node-template" type="text/template">
            <td><%= nodeName %></td>
        </script>

        <table id="tree">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <script src="tree.js"></script>
    </body>
</html>
于 2013-05-10T18:29:11.867 回答