[英]backbone.js - change or click events not firing
I am getting started with backbone.js but it seems i am not able to get the first hand code correct. 我正在开始使用bone.js,但似乎无法正确掌握第一手代码。 I looked up all the resources but cant figure out what is the problem.
我查找了所有资源,但无法找出问题所在。
I was expecting changed event getting fired every time i change something in the input box and finally when i click the button, it should fire someAction function. 我期望每次更改输入框中的内容时都会触发更改的事件,最后,当我单击按钮时,它应该触发someAction函数。 There are no JavaScript errors but nothing happens.
没有JavaScript错误,但没有任何反应。 no change or click event getting fired.
没有更改或点击事件被触发。
Can someone please tell me what am i missing here? 有人可以告诉我我在这里想念什么吗?
Aspx Page: Aspx页面:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="underscore.js" type="text/javascript"></script>
<script src="Backbone.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
Person = Backbone.Model.extend({
el: '#form1',
events : {
"click #DoSomething": "someAction"
},
initialize: function(){
//This will bind change event of input controls to below function
_.bindAll(this, "changed");
},
//This function will be fired whenever value in the input is changed
changed: function(evt) {
var target = $(evt.currentTarget),
data = {};
data[target.attr('name')] = target.attr('value');
this.model.set(data);
alert('Model Updated')
},
//take some action on click of a button
someAction: function(){
var fName = this.model.get('FirstName');
var lName = this.model.get('LastName');
alert("First Name" + fName + " Last Name " + lName);
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span>First Name</span>
<input type="text" name="FirstName" id="txtFirstName" value="Mark" />
<span>Last Name</span><input type="text" name="LastName" id="txtLastName" value="Waugh" />
<input type="button" id="DoSomething" value="Login Here" />
</div>
</form>
</body>
</html>
All of your functionality should be in a view not a model. 您的所有功能都应该在视图中而不是模型中。
Change Person = Backbone.Model.extend
to PersonView = Backbone.View.extend
. 将
Person = Backbone.Model.extend
更改为PersonView = Backbone.View.extend
。 Now you actually have to create an instance of the view. 现在,您实际上必须创建视图的实例。
$(function() {
PersonView = Backbone.View.extend({
...
});
window.personview = new PersonView();
});
_.bindAll(this, "changed");
won't bind to the changed event. 不会绑定到更改后的事件。 You need to add
'change input': 'changed'
to your events list. 您需要在事件列表中添加
'change input': 'changed'
。 The bindAll isn't needed at all. 完全不需要bindAll。
Also, I believe this.model is undefined. 另外,我相信this.model是未定义的。 I think you should be using
this.set(data)
instead of this.model.set(data)
. 我认为您应该使用
this.set(data)
而不是this.model.set(data)
。
相关小提琴(不是我的提琴,但可以使用) http://jsfiddle.net/thomas/C9wew/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.