我是backbone.js的初学者。我开始使用 Addy Yosmani 的“Backbone basics”中的示例创建一个小型待办事项应用程序。我有如下示例代码。我为每个项目使用了一个 View ，并且有一个 ListView ，其中我渲染每个项目并将其附加到列表中，但不是附加而是替换了整个项目。我尝试使用调试器，在循环第一次运行后，元素保留在第一个待办事项中，但在第二次运行中，元素被替换而不是附加。我无法找到解决方案。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
</head>
<body>
<div id="my-container">
</div>
<div class="container container-fluid" id="container" style="margin-top:5px;">
</div>
<script type="text/template" id="item-template">
<div class="post-panel" style="margin-top:5px;">
<div class="panel-default panel-heading post-title">
<%= title %>
</div>
<div class="panel-default panel-body post-content">
<%= content %>
</div>
</div>
</script>
<script>
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();
</script>
</body>
</html>
最佳答案
来自Backbone.View.el :
this.elcan be resolved from a DOM selector string or an Element; otherwise it will be created from the view'stagName,className,idandattributesproperties. If none are set, this.el is an empty div, which is often just fine. An el reference may also be passed in to the view's constructor.
因此您可以简单地添加选项设置:
className: 'container container-fluid'
或者您还想保留 style="margin-top:5px;"
attributes: {
className: 'container container-fluid',
style: 'margin-top:5px;'
}
下面演示了tagName方式，可以看到属性方式here .
var Todo = Backbone.Model.extend();
var TodoItemView = Backbone.View.extend({
todo_tpl: _.template($('#item-template').html()),
// Give the created element classes
className: 'container container-fluid',
// Backbone default creates an empty div if you don't specifiy
// tagName: 'div',
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()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<div id="my-container">
</div>
<div class="container container-fluid" id="container" style="margin-top:5px;">
</div>
<script type="text/template" id="item-template">
<div class="post-panel" style="margin-top:5px;">
<div class="panel-default panel-heading post-title">
<%=title %>
</div>
<div class="panel-default panel-body post-content">
<%=content %>
</div>
</div>
</script>关于javascript - Backbone js追加替换html而不是追加元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33500659/