backbone.js - Nested CompositeViews with different sources instantiate multiple parent views instead of child -
i have 3 views in application. 1 itemview (item) child of compositeview (category) child of compositeview (parentcategory).
i waterfall instantiate views based on api hits data (in case i'm using local data give impression of live data).
here application in js form:
var app = new backbone.marionette.application(); app.addregions({ mainregion: "#main" }); var todoarray = []; // single row var todorow = backbone.marionette.itemview.extend({ template: "#todo-template", tagname: "li", events: { 'click span': 'clickspan' }, clickspan: function() { console.log(this); } }); // grid view var categoryview = backbone.marionette.compositeview.extend({ tagname: "li", template: "#category-template", itemview: todorow, itemviewoptions: function(model, index) { return { parent: model.get('parent') } }, appendhtml: function(collectionview, itemview){ if(collectionview.id === itemview.model.get('parent')) { itemview.render(); collectionview.$("ul.items").append(itemview.el); } } }); var tabview = backbone.marionette.compositeview.extend({ tagname: "li", template: "#tab-template", itemview: categoryview, itemviewoptions: function(model, index) { return { parent: model.get('parent') } }, appendhtml: function(collectionview, itemview){ if(collectionview.id === itemview.model.get('parent')) { itemview.render(); collectionview.$("ul.categories").append(itemview.el); } } }); var tab = backbone.model.extend({}), category = backbone.model.extend({}), todo = backbone.model.extend({}); var tabcollection = backbone.collection.extend({ model: tab, url: 'tab.json' }); var categorycollection = backbone.collection.extend({ model: category, url: 'category.json' }); var todocollection = backbone.collection.extend({ model: todo, url: 'todo.json' }); var todolist, todofetch, categorylist, categoryfetch, tablist, tabfetch; app.addinitializer(function() { console.log(data); todolist = new todocollection(data.items); todofetch = todolist.fetch(); categorylist = new categorycollection(data.categories); tablist = new tabcollection(data.tabs); var todocallback = function() { //categoryfetch = categorylist.fetch(); //categoryfetch.done(categorycallback); categorycallback(); }, categorycallback = function() { //tabfetch = tablist.fetch(); //tabfetch.done(tabcallback); tabcallback(); }, tabcallback = function() { tablist.each(function(tab, index) { var samplecatlist = _.filter(categorylist.models, function(category) { if(tab.get('id') === category.get('parent')) return true; return false; }); tabview = new tabview({ collection: new tabcollection(samplecatlist), id: tab.get('id'), model: tab }); tabview.render(); $('#main ul').append(tabview.el); }); }; //todofetch.done(todocallback); todocallback(); }); app.start();
i have working jsfiddle here: http://jsfiddle.net/pq5s7/
there should 3 2 level li's roger & wilko
then there should 2 categories, , 1 item underneath each category.
Comments
Post a Comment