我第一次使用backbone.js,但无法正常启动事件。有人可以解释我做错了吗?
非常感谢!
在我的html底部加载的app.js中:
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>
答案 0 :(得分:1)
似乎工作正常:http://jsfiddle.net/Jbahx/。 (检查你的主干和下划线版本,并确保DOM已初始化)
关于你做错了什么:
model: Discussion
。您必须为视图提供模型的实例,而不是类。如果您为视图提供模型(可选),通常是因为您想要表示特定实例的数据。this.template = _.template( $('#discussion-template').html() );
方法中的initialize
。在扩展时将其作为视图的属性放置,因此它将放在视图的原型中(即使它在这里似乎是单例):template: _.template( $('#discussion-template').html() ),
。答案 1 :(得分:1)
问题是jQuery。最新的1.x版本不起作用,但使用最新的2.x版本修复了该问题。如果有人能解释为什么我们在这种情况下只应该使用2.x会很有用吗?
感谢帮助所有人。
答案 2 :(得分:-1)
首先,你必须在overriden方法中调用Backbone.View.prototype.initialize让Backbone初始化事件监听器:
initialize: function(){
//this.$el = $("#form_discussion");
this.template = _.template( $('#discussion-template').html() );
Backbone.View.prototype.initialize.call(this)
},
其次,在初始化中渲染视图 - 这不是最佳实践。用于此单独的render
方法。