Question

我仍在努力渲染我的分组集合。在我的控制台中，我可以看到错误的集合。我想渲染每个类别名称和此类别中的每个项目。谢谢你的意见！这将非常有用....

我的代码全是：

<!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">
</head>
<body>
<header>
</header>
<content>  
   <div class="jumbotron">
       <div class="container">
           <h1>My Items!</h1>
       </div>
   </div>
   <div id="items"></div>                       
</content>
<footer>
</footer>
<script id="allItemTemlate" type="text/template">
       <ul>
       <% _.each( data, function( category, i ){  %>
           <li>
               <h3><%= i %></h3>
               <ul>
               <% _.each( category, function( item ){ %>
               <li>
                 <%= item.title %>
               </li>
               <% }) %>
               </ul>
         </li>
       <% }) %>
       </ul>   
</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({});

// !collections.js

App.Collections.Items = Backbone.Collection.extend({
    model: App.Models.Item,
    url: 'api/items.json'
});

// !views.js 

App.Views.Items = Backbone.View.extend({
    el: '#items',
    initialize: function() {
    this.render();
     var groups = _.groupBy(this.collection.toJSON(), 'category');
     console.log(groups);
     template = _.template( document.getElementById('allItemTemlate').innerHTML, { data : groups } );

    },
    render: function() {
    document.getElementById('items').innerHTML = template;
    },
});

// !router.js

App.Router = Backbone.Router.extend({
    routes: {
        '':'index',
    },
    index: function() {
        console.log('index page !');
    },
});

new App.Router;
Backbone.history.start();
App.items = new App.Collections.Items;
App.items.fetch().then(function() {
    new App.Views.Items({ collection: App.items });
});
</script>
</body>
</html>

Answer 1

您需要更加了解执行顺序。例如，如果您需要render中的变量，则在设置该变量之前不应调用render。我也提出了一些改变。

App.Views.Items = Backbone.View.extend({
    el: '#items',
    initialize: function() {
     // listen to collection change event and re-render then
     this.listenTo( this.collection, "change", this.render );

     // changes: this.template instead of global template
     // and not executing it yet, but creating a function
     this.template = _.template( document.getElementById('allItemTemlate').innerHTML );
     this.render();
    },
    // a separate method to get the groupped collection
    getGroups : function(){
       return _.groupBy(this.collection.toJSON(), 'category');
    },
    render: function() {
        // here the template gets executed and writtn to element's innerHTML
        // also removed getElementById, as it is readily available as this.el
        this.el.innerHTML = this.template({ data : this.getGroups() });
    },
});

骨架groupby集合未呈现

1 个答案: