グループ化されたコレクションのレンダリングにまだ苦労しています。私のコンソールでは、コレクションにエラーが表示されます。このカテゴリの各カテゴリ名と各アイテムをレンダリングしたい。意見をありがとう!!! これは非常に役立ちます....
私のコード全体があります：
<!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>