javascript - Pass Options from CollectionView to Recursive CompositeView -
i'm doing extremely similar tree structure described in article:
http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
the idea have collection of root nodes in collection view (treeroot) each root node has recursive composite view (treeview). jsfiddle showing simplest working example tree structure aricle can found here:
http://jsfiddle.net/hoffmanc/nh9j6/
i want modify example options can passed each tree view, regardless of in tree structure. here (only modified) jsfiddle:
the js code in modified example is:
// recursive tree view var treeview = backbone.marionette.compositeview.extend({ template: "#node-template", tagname: "li", initialize: function(){ // grab child collection parent model // can render collection children // of 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(); } } }); // tree's root: simple collection view renders // recursive tree structure each item in collection var treeroot = backbone.marionette.collectionview.extend({ tagname: "ul", itemview: treeview }); // ---------------------------------------------------------------- // below line 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'} }); as can see, attempting pass options using itemviewoptions, when treeview initialized, not there. i'm assuming because treeroot getting itemviewoptions.
my question is: how pass options treeroot treeview?
thanks!
we ended going different implementation due ui requirements (need have tree inside table). using jquery plugin called treetable create tree within table. in sample code below, collection view group of item views (the item views appended directly dom). each node has children creates new collection view them. jquery object itemview el's need appended passed along each 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. append rows!"; } table.append(this.el); if (children !== undefined) { // create , render new collection view 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 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 line 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>
Comments
Post a Comment