僅在單擊一次事件后才渲染主干groupedBy集合

Question

我的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);
})();

//！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>

Answer 1

聽起來您可以使用itemView。 這是木偶很方便的時候。 簽出木偶

僅在單擊一次事件后才渲染主干groupedBy集合

問題描述

1 個解決方案

解決方案1
0 已采納 2013-10-09 04:00:52

僅在單擊一次事件后才渲染主干groupedBy集合

問題描述

1 個解決方案

解決方案1 0 已采納 2013-10-09 04:00:52

解決方案1
0 已采納 2013-10-09 04:00:52