gpt4 book ai didi

javascript - backbone js Todo代码不在浏览器中显示

转载 作者:行者123 更新时间:2023-11-30 00:33:55 25 4
gpt4 key购买 nike

我正在学习 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>

最佳答案

每个 View 都应该以其中一种方式呈现,当你想创建新元素时,指定标签名称、类名称和 ID,当需要一个元素将 View 附加到它时,你应该指定 el 来选择它(jquery 选择它)。您的代码的下一期是您不在渲染函数中返回它。当你有嵌套 View 时,你应该返回这个。

我已经在这个bin中测试过了 http://jsbin.com/jefuyuxanu/2/edit

关于javascript - backbone js Todo代码不在浏览器中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28090088/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com