backbone js Todo 代码未在浏览器中显示
backbone js Todo Code not displaying in browser
我正在学习Backbone JS,为什么我下面的代码在浏览器中不显示?我什至使用了路由器,但仍然没有在浏览器中显示。请告诉我出了什么问题。顺便说一句,输出仅显示在控制台中。对不起,如果它是愚蠢的查询。
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script type="text/javascript">
/*$.getJSON('api/users/1',function(data){
console.log(data);
});*/
</script>
</head>
<body>
<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({
toggleStatus: function(){
if(this.get('status') == 'incomplete'){
this.set({'status':'complete'});
} else {
this.set({'status':'incomplete'});
}
}
})
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()));
},
events: {
'change imput': 'toggleStatus'
},
toggleStatus : function(){
this.model.toggleStatus();
}
})
var todoItem = new TodoItem({ description: 'Pick up milk', status: 'incomplete', id: 1 });
var todoView = new TodoView({model: todoItem});
console.log(todoView.el);
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
});
var router = new Router();
router.on('route:home' , function(){
todoView.render();
});
Backbone.history.start();
</script>
</body>
</html>
您的 TodoView 未附加到 DOM 中。
为您的视图设置 "el" 属性
var TodoView = Backbone.View.extend({
el:'body',
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;
},
events: {
'change imput': 'toggleStatus'
},
toggleStatus : function(){
this.model.toggleStatus();
}
})
每个视图都应该以其中一种方式呈现,当你想创建新元素时,指定 tagName、className 和 id,当需要一个元素将视图附加到它时你应该指定 el 到 select 它(jquery selects 吧)。您的代码的下一期是您在渲染函数中没有 return this。当你有嵌套视图时,你应该 return 这个。
我已经在这个箱子里测试过了
http://jsbin.com/jefuyuxanu/2/edit
我正在学习Backbone JS,为什么我下面的代码在浏览器中不显示?我什至使用了路由器,但仍然没有在浏览器中显示。请告诉我出了什么问题。顺便说一句,输出仅显示在控制台中。对不起,如果它是愚蠢的查询。
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script type="text/javascript">
/*$.getJSON('api/users/1',function(data){
console.log(data);
});*/
</script>
</head>
<body>
<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({
toggleStatus: function(){
if(this.get('status') == 'incomplete'){
this.set({'status':'complete'});
} else {
this.set({'status':'incomplete'});
}
}
})
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()));
},
events: {
'change imput': 'toggleStatus'
},
toggleStatus : function(){
this.model.toggleStatus();
}
})
var todoItem = new TodoItem({ description: 'Pick up milk', status: 'incomplete', id: 1 });
var todoView = new TodoView({model: todoItem});
console.log(todoView.el);
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
});
var router = new Router();
router.on('route:home' , function(){
todoView.render();
});
Backbone.history.start();
</script>
</body>
</html>
您的 TodoView 未附加到 DOM 中。
为您的视图设置 "el" 属性
var TodoView = Backbone.View.extend({
el:'body',
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;
},
events: {
'change imput': 'toggleStatus'
},
toggleStatus : function(){
this.model.toggleStatus();
}
})
每个视图都应该以其中一种方式呈现,当你想创建新元素时,指定 tagName、className 和 id,当需要一个元素将视图附加到它时你应该指定 el 到 select 它(jquery selects 吧)。您的代码的下一期是您在渲染函数中没有 return this。当你有嵌套视图时,你应该 return 这个。
我已经在这个箱子里测试过了 http://jsbin.com/jefuyuxanu/2/edit