无法在页面上显示的Todo集合 [英] Unable to display Todo Collection on the page
问题描述
荫练骨干JS，下面是code荫绑在页面上显示的Todo集合。但IAM不明白出了什么问题与下面code和结束时没有任何显示。 BTW，荫能够从服务器和控制台日志数据显示太正确的数据，而只是不显示在页面上。好像我的渲染调用不是从服务器获取数据之前，但不知道这是为什么发生的那样。
这里是code，请建议我出了什么问题？
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性
HREF =http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css＆GT;
＆LT; /头＆GT;＆LT;身体GT;＆LT; DIV ID =演示＆GT;＆LT; / DIV＆GT;＆所述; SCRIPT SRC =http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js＆GT;＆下; /脚本＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;VAR内的TodoItem = Backbone.Model.extend（{
urlRoot：API，
}）VAR TodoCollection = Backbone.Collection.extend（{
型号：内的TodoItem，
网址：'API /待办事项
}）VAR TodoView = Backbone.View.extend（{
模板：_.template（'＆LT; H3＆GT;'+'＆LT;输入类型=复选框'+'＆LT;若％（状态===完全）打印（选中）％＆GT; /＆GT;'+ '＆LT;％=描述％GT;＆LT; / H3和GT;'），
渲染：功能（）{
这$ el.html（this.template（this.model.toJSON（）））;
返回此;
}}）VAR TodoListView = Backbone.View.extend（{
初始化：功能（）{
this.listenTo（this.collection，复位，this.render）;
this.collection.fetch（{重置：真}）;
}，
渲染：功能（）{
的console.log（this.collection.length）;
this.collection.forEach（this.addOne，这一点）;
}，
addOne：函数（内的TodoItem）{
的console.log（todoItem.get（说明））;
VAR todoView =新TodoView（{模式：内的TodoItem}）;
。这$ el.append（todoView.render（））;
}}）;
VAR内的TodoItem =新内的TodoItem（）
VAR todolist的=新TodoCollection（）VAR todoListView =新TodoListView（{EL：#demo，收藏：todolist的}）＆LT; / SCRIPT＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;
现在的问题是要附加这个这是从view.You返回必须附加的查看El 到 DOM 。
这$ el.append（todoView.render（）EL）。
Iam practising Backbone JS, below is the code Iam tying to display Todo Collection on the page. But iam not understanding what went wrong with the below code and at end displaying nothing. BTW, Iam able to get data from server and console logs too showing correct data, but just not displaying on the page. Seems like my render calling before than getting data from server, but dont know why is that happening like that.
Here is the code, please suggest me what went wrong?
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="demo"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/javascript">
var TodoItem = Backbone.Model.extend({
urlRoot: 'api',
})
var TodoCollection = Backbone.Collection.extend({
model: TodoItem,
url: 'api/todos'
})
var TodoView = Backbone.View.extend({
template: _.template('<h3> ' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>/>' +' <%= description %></h3>'),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
})
var TodoListView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.collection,'reset',this.render);
this.collection.fetch({reset:true});
},
render: function(){
console.log(this.collection.length);
this.collection.forEach(this.addOne,this);
},
addOne: function(todoItem){
console.log(todoItem.get('description'));
var todoView = new TodoView({model: todoItem});
this.$el.append(todoView.render());
}
});
var todoItem = new TodoItem()
var todoList = new TodoCollection()
var todoListView = new TodoListView({el: '#demo', collection: todoList})
</script>
</body>
</html>
The problem is you are appending this which is returned from the view.You have to attach el of view to DOM.
this.$el.append(todoView.render().el);
这篇关于无法在页面上显示的Todo集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
