js中避免一个html一直追加,Backbone js append替换html而不是追加元素

我是backbone.js的初学者。我开始用Addy Yosmani的“Backbone fundamentals”的例子创建一个小型待办事项应用程序。我有如下代码示例。我为每个项目使用了一个视图，并且我有一个列表视图，其中我呈现每个项目并将其附加到列表中，而不是附加它来替换整个项目。我尝试了一个调试器，并且元素在第一次循环运行后保持第一次待办事项，但在第二次运行时元素被替换而不是追加。我找不出解决方案。Backbone js append替换html而不是追加元素

代码

Hello World in Backbone.js

var Todo = Backbone.Model.extend();

var TodoItemView = Backbone.View.extend({

todo_tpl: _.template($('#item-template').html()),

el: $('#container'),

render: function() {

this.$el.html(this.todo_tpl(this.model.attributes));

return this;

},

});

var TodoListView = Backbone.View.extend({

el: $('#my-container'),

render: function() {

posts = [

{'title': 'sample title 1' , 'content': 'sample content 1'},

{'title': 'sample title 2' , 'content': 'sample content 2'},

{'title': 'sample title 3' , 'content': 'sample content 3'},

{'title': 'sample title 4' , 'content': 'sample content 4'},

];

for (i=0; i < posts.length; i++) {

var todo1 = new Todo(posts[i]);

var todo1_view = new TodoItemView({model: todo1});

this.$el.append(todo1_view.render().el);

}

return this;

},

});

var todo1 = new Todo({"title" : "sample title" , "content" : "sample content"});

var todo1_view = new TodoItemView({model: todo1});

var todo_list_view = new TodoListView();

todo_list_view.render()

// todo1_view.render();

2015-11-03

xtreak

+2

所有ItemView控件都指向同一个元素'$( '＃集装箱')'的。所以你的代码会覆盖'$('＃container')'中的内容，并将它附加到'$('＃my-container')'。 –

+0

@fuyushimoya谢谢。我只是评论它，我得到渲染的元素。我怎样才能创建四个容器类的元素？ –

+0

@fuyushimoya既然你说它附加了新创建的内容以及div'my-container'，为什么它会被替换？ –