0

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

这是我的整个代码：

<!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>
4

1 回答 1

2

您需要更加了解执行顺序。例如，如果您需要 in 中的变量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() });
    },
});
于 2013-09-26T11:06:17.120 回答