StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Try with nested view and I would suggest using template</p> <pre><code>var data = [ {"id":1,"name":"one","parent_id":0}, {"id":2,"name":"two","parent_id":0}, {"id":3,"name":"three","parent_id":0}, {"id":4,"name":"four","parent_id":0}, {"id":5,"name":"five","parent_id":0}, {"id":6,"name":"one","parent_id":2}, {"id":7,"name":"two","parent_id":2}, {"id":8,"name":"three","parent_id":2}, {"id":9,"name":"four","parent_id":2}, {"id":10,"name":"five","parent_id":2}, ] var NestedView = Backbone.View.extend({ render: function(){ this.$el.html( "<ul id='ul-0'></ul>" ) this.collection.each( function( model ){ this.renderElement( model ) }, this ) }, renderElement: function( model ){ var ul = this.getParentUl( model ); this.appendElement( ul, model ); }, getParentUl: function( model ) { var ul = this.$el.find( "#ul-" + model.get( "parent_id" ) ); if( ul.length == 0 ) { this.appendListInElement( model ); ul = this.$el.find( "#ul-" + model.get( "parent_id" ) ); } return ul; }, appendListInElement: function( model ){ var li = this.$el.find( "#li-" + model.get( "parent_id" ) ); li.after( "<ul id='ul-" + model.get( "parent_id" ) + "'></ul>" ); }, appendElement: function( ul, model ){ ul.append( "<li id='li-" + model.get( "id" ) + "'>" + model.get( "name" ) + "</li>" ); } }); var elements = new Backbone.Collection( data ); var nestedView = new NestedView({ el: "#wrapper", collection: elements }); nestedView.render(); <div id="wrapper"></div> </code></pre> <p>Here is the complete code, with underscore template</p> <pre><code><!DOCTYPE html> <html> <head> <title>Backbone</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://underscorejs.org/underscore.js"></script> <script type="text/javascript" src="http://backbonejs.org/backbone.js"></script> <script type="text/template" id="parent-template"> <ul id='ul-<%= parent_id %>'></ul> </script> <script type="text/template" id="child-template"> <li id="li-<%= id %>"><%= name %></li> </script> <script type="text/javascript"> var compiledParent = _.template( $('#parent-template').html() ); var compiledChild = _.template( $('#child-template').html() ); var data = [ {"id":1,"name":"one","parent_id":0}, {"id":2,"name":"two","parent_id":0}, {"id":3,"name":"three","parent_id":0}, {"id":4,"name":"four","parent_id":0}, {"id":5,"name":"five","parent_id":0}, {"id":6,"name":"one","parent_id":2}, {"id":7,"name":"two","parent_id":2}, {"id":8,"name":"three","parent_id":2}, {"id":9,"name":"four","parent_id":2}, {"id":10,"name":"five","parent_id":2}, ]; var NestedView = Backbone.View.extend({ render: function(){ this.$el.html( compiledParent({parent_id : '0'}) ); this.collection.each( function( model ){ this.renderElement( model ) }, this ) }, renderElement: function( model ){ var ul = this.getParentUl( model ); this.appendElement( ul, model ); }, getParentUl: function( model ) { var ul = this.$el.find( "#ul-" + model.get( "parent_id" ) ); if( ul.length == 0 ) { this.appendListInElement( model ); ul = this.$el.find( "#ul-" + model.get( "parent_id" ) ); } return ul; }, appendListInElement: function( model ){ var li = this.$el.find( "#li-" + model.get( "parent_id" ) ); li.after( compiledParent({parent_id : model.get( "parent_id" )}) ); }, appendElement: function( ul, model ){ ul.append( compiledChild({id:model.get( "id" ) , name:model.get( "name" )}) ); } }); $(document).ready(function() { var elements = new Backbone.Collection( data ); var nestedView = new NestedView({ el: "#wrapper", collection: elements }); nestedView.render(); }); </script> </head> <body> <div id="wrapper"> </div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload