我第一次使用backbone.js,但无法正确触发事件。有人能解释一下我做错了什么吗?
非常感谢!
在app.js中加载到我的html的底部:
var Discussion = Backbone.Model.extend({
defaults: {
id: null,
title: 'New discussion'
},
urlRoot: '/api/discussion'
});
var DiscussionCollection = Backbone.Collection.extend({
model: Discussion,
url: '/api/discussion'
});
var DiscussionView = Backbone.View.extend({
events: {
'click .btnCreateDiscussion': 'create',
'keypress #discussion_title': 'create'
},
initialize: function(){
//this.$el = $("#form_discussion");
this.template = _.template( $('#discussion-template').html() );
},
render: function(){
console.log("rendering");
return this;
},
create: function(){
console.log('creating a new discussion')
}
});
var discussionView = new DiscussionView({ el: $("#form_discussion"), model: Discussion });
HTML格式:
<form action="" id="form_discussion" method="post">
<label for="discussion_title">Discussion Title</label>
<input type="text" id="discussion_title" name="discussion_title" />
<input class="btnCreateDiscussion" type="button" value="Create Discussion">
<script type="text/template" id="discussion-template">
<h1><%= title %></h1>
</script>
3条答案
按热度按时间gijlo24d1#
看起来效果不错:http://jsfiddle.net/Jbahx/ .(检查 Backbone.js 和下划线版本,并确保DOM已初始化)
关于你做错了什么:
model: Discussion
。您必须为视图提供一个模型示例,而不是一个类。如果您为视图提供一个模型(可选),通常是因为您希望表示特定示例的数据。initialize
方法中的this.template = _.template( $('#discussion-template').html() );
。在扩展时将其作为视图的属性,以便将其放入视图的原型中(即使它在此处看起来是一个单例):template: _.template( $('#discussion-template').html() ),
.y1aodyip2#
问题出在jQuery上。最新的1.x版本不能工作,但是使用最新的2.x版本可以解决这个问题。如果有人能解释一下为什么在这种情况下我们应该只使用2.x,那将是很有用的。
htzpubme3#
首先,你必须在你的overriden方法中调用Backbone.View.prototype.initialize,让Backbone初始化事件监听器:
第二,在initialize中呈现视图--这不是最佳实践。请使用这个单独的
render
方法。