通过收集和显示Backbone.js的数组中的迭代 [英] Iterate through an array in a collection and display in Backbone.js
问题描述
我有与征求意见的清单待办事项的模板。每个待办事项有在localStorage的意见数组意见。我获取所有待办事项，通过每一个待办事项的意见数组迭代，我希望所有的注释被分配到相应的待办事项。我如何追加到正确的评论列表？
目前我得到的输出像这样的：
POST1
Comment1_Post1
Comment2_Post1
Comment1_Post2
Comment2_Post2
POST2
Comment1_Post2
Comment2_Post2
EDIT1：新CommentCollectionView
渲染：功能（）{
。这$ el.html（this.template（））;
VAR commentList =这个$（ul.comment清单）。
this.collection.each（功能（评论）{
VAR评论查看=新的评论查看（{模式：评论}）;
commentList.append（commentView.render（）埃尔。）;
}）;
返回此;
}，
HTML
＆LT;身体GT;
＆LT; DIV CLASS =内容＆GT;
＆LT; UL类=待办事项列表＆GT;＆LT; / UL＆GT;
＆LT; / DIV＆GT;//模板
＆LT;脚本类型=文/模板ID =待办事项模板＆GT;
＆LT;标签类=待办事项内容＆GT;＆LT;％=含量％GT;＆LT; /标签＆gt;
＆LT; UL类=注释列表的风格=保证金左：2em的＆GT;＆LT; / UL＆GT;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/模板ID =注释模板＆GT;
＆LT;标签类=评论内容＆GT;＆LT;％=含量％GT;＆LT; /标签＆gt;
＆LT; / SCRIPT＆GT;
藤查看：
VAR TodoView = Backbone.View.extend（{
标签名：礼
模板：_.template（$（＃TODO模板）HTML（）。）
事件：{
点击button.addComment：addComment
}，
初始化：功能（）{
_.bindAll（这一点，渲染）;
this.model.bind（变，this.render）;
VAR commentsArray = this.model.get（意见）;
VAR commentCollection =新CommentCollection（）;
commentCollection.add（commentsArray）;
VAR commentCollectionView =新CommentCollectionView（{模式：commentCollection}）;
}
}）;
注释集合视图：
VAR CommentCollectionView = Backbone.View.extend（{
初始化：功能（）{
_.bindAll（这一点，渲染，appendItem，的addAll，renderComment）;
this.model.bind（复位，this.addAll）;
this.model.bind（变，this.render）;
this.model.bind（增加，this.appendItem）; this.model.trigger（重置）;
}，
的addAll：功能（）{
this.model.each（this.appendItem）;
}，
appendItem：功能（评论）{
VAR评论查看=新的评论查看（{模式：评论}）;
$（ul.comment清单）追加（commentView.render（）EL）。
}
}）;
该问题是在TodoModel的定义，你没有粘贴它的code，但我可以承担的问题，是一个常见的问题与数据类型是对象。
TodoModel有你定义在默认这样一个属性：
VAR TodoModel = Backbone.Model.extend（{
默认值：{
//一些
注释 ： []
}
}）;
所以评论是总是被所有的TodoModel的实例中使用的数组。更改默认为是这样的：
VAR TodoModel = Backbone.Model.extend（{
默认设置：功能（）{
返回{
//一些
注释 ： []
}
}
}）;
更新，因为似乎与jQuery的选择范围的问题：
为了确保您使用当前视图利用这个只有DOM元素。而不是正常的jQuery呼叫，例如：此$（'ul.comment列表'）
I've got a template for a todo with a list for comments. Each todo has an array "comments" of comments in localstorage. I fetch all todos, iterate through each todo's "comments" array and I want all comments to be assigned to the corresponding todo. How do I append to the right comment-list?
Currently I get the output like this one:
Post1
Comment1_Post1
Comment2_Post1
Comment1_Post2
Comment2_Post2
Post2
Comment1_Post2
Comment2_Post2
Edit1: the new CommentCollectionView
render: function() {
this.$el.html(this.template());
var commentList = this.$("ul.comment-list");
this.collection.each(function(comment) {
var commentView = new CommentView({model: comment});
commentList.append(commentView.render().el);
});
return this;
},
HTML:
<body>
<div class="content">
<ul class="todos-list"></ul>
</div>
// Templates
<script type="text/template" id="todo-template">
<label class="todo-content"><%= content %></label>
<ul class="comment-list" style="margin-left: 2em"></ul>
</script>
<script type="text/template" id="comment-template">
<label class="comment-content"><%= content %></label>
</script>
Todo View:
var TodoView = Backbone.View.extend({
tagName: "li",
template: _.template($("#todo-template").html()),
events: {
"click button.addComment": "addComment"
},
initialize: function() {
_.bindAll(this, "render");
this.model.bind("change", this.render);
var commentsArray = this.model.get("comments");
var commentCollection = new CommentCollection();
commentCollection.add(commentsArray);
var commentCollectionView = new CommentCollectionView({model: commentCollection});
}
});
Comment Collection View:
var CommentCollectionView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, "render", "appendItem", "addAll", "renderComment");
this.model.bind("reset", this.addAll);
this.model.bind("change", this.render);
this.model.bind("add", this.appendItem);
this.model.trigger("reset");
},
addAll: function() {
this.model.each(this.appendItem);
},
appendItem: function(comment) {
var commentView = new CommentView({model: comment});
$("ul.comment-list").append(commentView.render().el);
}
});
The problem is in the definition of the TodoModel, you did not pasted the code of it but I could assume the issue, is a common issue with data-types that are objects.
TodoModel has an attribute that you are defining in your default in this way:
var TodoModel = Backbone.Model.extend({
defaults : {
//some
comments : []
}
});
So comments is an array that is always being used in all of your instances of TodoModel. Change your defaults to be in this way:
var TodoModel = Backbone.Model.extend({
defaults : function(){
return {
//some
comments : []
}
}
});
Update, because seems to be an issue with the scope of the selector of jQuery: To be sure that you use only DOM elements of your current view use this. instead of the normal jQuery Call, example: this.$('ul.comment-list')
这篇关于通过收集和显示Backbone.js的数组中的迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
