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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -