骨干网收集_.groupedBy但不渲染不工作 [英] Backbone collection is _.groupedBy but not render doesn't work
问题描述
我跟我的 _。GROUPBY 功能挣扎。有了这个code我在浏览器这样的事情已经呈现：
I am struggling with my _.groupBy function. With this code I have rendered in the browser something like this:
align
spellcheck
isContentEditable
contentEditable
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
outerText
outerHTML
这里是我的整个code：
<!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>
<div class="jumbotron">
<div class="container">
<h1>My Items!</h1>
</div>
</div>
<div id="items"></div>
<div class="jumbotron">
<div class="container">
<h1>My Grouped Items?</h1>
</div>
</div>
</content>
<footer>
</footer>
<script id="allItemTemlate" type="text/template">
<ul>
<% _.each( items, function( category, i ){ %>
<li>
<h3><%= i %></h3>
<ul>
<% _.each( category, function( item ){ %>
<li>
<%= 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);
window.template = function(id) {
return _.template( $('#' + id).html() );
};
})();
// !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.MyItems = Backbone.View.extend({
el: '#items',
initialize: function() {
var groups = _.groupBy(this.collection.toJSON(), 'category');
console.log(groups);
vent.on('item:edit', this.editItem, this);
var allItemsView = new App.Views.Items({ collection: App.items }).render();
$('#items').append(allItemsView.el);
},
editItem: function(item) {
var editItemView = new App.Views.EditItem({ model: item });
$('#edit-item').html(editItemView.el);
},
});
App.Views.Items = Backbone.View.extend({
tagName: 'ul',
className: 'items',
initialize: function() {
this.collection.on('add', this.addOne, this);
},
render: function() {
this.collection.each( this.addOne, this );
return this;
},
addOne: function(item) {
var itemView = new App.Views.Item({ model: item });
this.$el.append(itemView.render().el);
},
});
App.Views.Item = Backbone.View.extend({
tagName: 'li',
className: 'item',
template: template('allItemTemlate'),
initialize: function() {
this.model.on('destroy', this.unrender, this);
this.model.on('change', this.render, this);
},
render: function() {
this.$el.html( this.template( this.model.toJSON() ) );
return this;
},
});
// !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.MyItems({ collection: App.items });
});
</script>
</body>
</html>
在控制台中我看到的数组，但不能正确渲染..
我不知道如何与所有功能做是正确的。
in the console I see array but is not rendered correctly.. I don't know how to do it correctly with all the functions.
推荐答案
我没有通过所有code的阅读，所以我不能给任何其他问题发言，但我马上就可以看到一个问题您GROUPBY功能。如果你使用App.Collections.Items，你不会是通过在视图中的函数实例化的集合;你会路过空集合构造对象的功能！另外，你需要把收集到JSON。你想要的是像这样的东西更多：
I haven't read through all of your code, so I can't speak to any other problems, but I can immediately see a problem with your groupBy function. If you use App.Collections.Items, you're not going to be passing the collection instantiated in the view to the function; you're going to be passing the empty Collection constructor object to the function! Also, you need to turn the collection into JSON. What you want is something more like this:
var groups = _.groupBy(this.collection.toJSON(), 'category');
这篇关于骨干网收集_.groupedBy但不渲染不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
