javascript - Backbone groupedBy collection is rendered only after one event click -
i have problem groupedby collections because not rendered after second event click. think there problem fetch collection...but don't know how fix. there code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>backbone test</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ul.items{list-style: none;width: 100%;margin: 0px;-webkit-margin-before: 0em;-webkit-padding-start: 0px;} </style> </head> <body> <header> </header> <content id="content"> <div id="persons"></div> <div id="items"></div> <div id="orders"></div> </content> <footer> </footer> <script id="itemstemlate" type="text/template"> <div class="jumbotron"> <div class="container"> <h1>my items!</h1> </div> <button class="open-orders" style="float:left;">orders</button> <button class="open-persons" style="float:right;">persons</button> </div> <% _.each( data, function( category, ){ %> <h3 class="category-name"><%= %></h3> <div><% _.each( category, function( item ){ %> <li class="product"><%= item.title %><p style="float:right;" class="cccc">-</p><p style="float:right;" class="cccc">+</p></li> <% }) %> </div> <% }) %> </script> <script id="orderstemlate" type="text/template"> <div class="jumbotron"> <div class="container"> <h1>my orders!</h1> </div> <button class="open-items" style="float:left;">items</button> <button class="open-persons" style="float:right;">persons</button> </div> <% _.each( data, function( category, ){ %> <h3 class="category-name"><%= %></h3> <div><% _.each( category, function( order ){ %> <li class="order"><%= order.title %><p style="float:right;" class="cccc">x</p></li> <% }) %> </div> <% }) %> </script> <script id="personstemlate" type="text/template"> <div class="jumbotron"> <div class="container"> <h1>my persons!</h1> </div> <button class="open-items" style="float:left;">items</button> <button class="open-orders" style="float:right;">orders</button> </div> <% _.each( data, function( category, ){ %> <h3 class="category-name"><%= %></h3> <div><% _.each( category, function( person ){ %> <li class="product"><%= person.title %><p style="float:right;" class="cccc">x</p></li> <% }) %> </div> <% }) %> </script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script> (function() { window.app = { models: {}, collections: {}, views: {}, router: {} }; window.vent = _.extend({}, backbone.events); })();
// !models.js
app.models.item = backbone.model.extend({}); app.models.person = backbone.model.extend({}); app.models.order = backbone.model.extend({});
// !collections.js
app.collections.items = backbone.collection.extend({ model: app.models.item, url: 'api/items.json' }); app.collections.persons = backbone.collection.extend({ model: app.models.person, url: 'api/persons.json' }); app.collections.orders = backbone.collection.extend({ model: app.models.order, url: 'api/orders.json' });
// !views.js
app.views.items = backbone.view.extend({ el: '#items', events: { 'click button.open-orders':'openorders', 'click button.open-persons':'openpersons', }, openorders: function() { this.remove(); this.unbind(); app.myrouter.navigate("orders", {trigger: true, replace: true}); console.log("openorders"); }, openpersons: function() { this.remove(); this.unbind(); app.myrouter.navigate("persons", {trigger: true, replace: true}); console.log("openpersons"); }, initialize: function() { this.listento( this.collection, "change", this.render ); this.template = _.template( document.getelementbyid('itemstemlate').innerhtml ); this.render(); this.$el; }, getgroups : function(){ return _.groupby(this.collection.tojson(), 'category'); }, render: function() { this.el.innerhtml = this.template({ data : this.getgroups() }); }, }); app.views.persons = backbone.view.extend({ el: '#persons', events: { 'click button.open-items':'openitems', 'click button.open-orders':'openorders', }, openitems: function() { this.remove(); this.unbind(); app.myrouter.navigate("items", {trigger: true, replace: true}); }, openorders: function() { this.remove(); this.unbind(); app.myrouter.navigate("orders", {trigger: true, replace: true}); }, initialize: function() { this.listento( this.collection, "change", this.render ); this.template = _.template( document.getelementbyid('personstemlate').innerhtml ); this.render(); this.$el; }, getgroups : function(){ return _.groupby(this.collection.tojson(), 'category'); }, render: function() { this.el.innerhtml = this.template({ data : this.getgroups() }); }, }); app.views.orders = backbone.view.extend({ el: '#orders', events: { 'click button.open-items':'openitems', 'click button.open-persons':'openpersons', }, openitems: function() { this.remove(); this.unbind(); app.myrouter.navigate("items", {trigger: true, replace: true}); }, openpersons: function() { this.remove(); this.unbind(); app.myrouter.navigate("persons", {trigger: true, replace: true}); }, initialize: function() { this.listento( this.collection, "change", this.render ); this.template = _.template( document.getelementbyid('orderstemlate').innerhtml ); this.render(); this.$el; }, getgroups : function(){ return _.groupby(this.collection.tojson(), 'category'); }, render: function() { this.el.innerhtml = this.template({ data : this.getgroups() }); }, });
// !router.js
app.router = backbone.router.extend({ routes: { '':'persons', 'persons':'persons', 'items':'items', 'orders':'orders' }, persons: function() { app.persons = new app.collections.persons; app.persons.fetch().then(function() { new app.views.persons({ collection: app.persons }); }); console.log('persons page !'); }, items: function() { app.items = new app.collections.items; app.items.fetch().then(function() { new app.views.items({ collection: app.items }); }); console.log('items page !'); }, orders: function() { app.orders = new app.collections.orders; app.orders.fetch().then(function() { new app.views.orders({ collection: app.orders }); }); console.log('orders page !'); }, }); app.myrouter = new app.router(); backbone.history.start(); </script> </body> </html>
sounds use itemview. when marionette comes in handy. check out marionette
Comments
Post a Comment