Javascript 主干groupedBy集合仅在单击一次事件后呈现_Javascript_Backbone.js_Underscore.js

Javascript 主干groupedBy集合仅在单击一次事件后呈现

javascript backbone.js

Javascript 主干groupedBy集合仅在单击一次事件后呈现,javascript,backbone.js,underscore.js,Javascript,Backbone.js,Underscore.js,我的groupedBy集合有问题，因为在第二次事件单击后未呈现。我认为取回我的收藏有问题……但我不知道它是如何修复的。这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Backbone test</title> <link href="//netdna.bootstrapcdn.com/bo

我的groupedBy集合有问题，因为在第二次事件单击后未呈现。我认为取回我的收藏有问题……但我不知道它是如何修复的。这是我的代码：

<!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, i ){  %>
        <h3 class="category-name"><%= i %></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, i ){  %>
        <h3 class="category-name"><%= i %></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, i ){  %>
        <h3 class="category-name"><%= i %></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);
})();

//!！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() });
    },
});

//!！路由器.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>

App.Router=Backbone.Router.extend({
路线：{
''：'人'，
"人":"人",，
“项目”：“项目”，
“订单”：“订单”
},
人员:职能(){
App.persons=新App.Collections.persons；
App.persons.fetch（）.then（函数（））{
新建App.Views.Persons（{collection:App.Persons}）；
});
console.log（'persons page！'）；
},
项目：功能（）{
App.items=新建App.Collections.items；
App.items.fetch（）.then（函数（））{
新建App.Views.Items（{collection:App.Items}）；
});
log（'items page！'）；
},
命令：函数（）{
App.orders=新App.Collections.orders；
App.orders.fetch（）.then（函数（））{
新的App.Views.Orders（{collection:App.Orders}）；
});
console.log（'orders page！'）；
}, 
});
App.myRouter=新建App.Router（）；
Backbone.history.start（）；

听起来您可以使用itemView。这是木偶非常方便的时候。

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>