Backbone.js 如何在主干中绑定更改事件?
我正在尝试加载国家/地区列表,并选择我只想发出警报的国家/地区,但不知何故,我无法捕获选择框的更改事件 谁能帮帮我吗 下面是html中带有模板脚本的视图、模型和集合部分的代码Backbone.js 如何在主干中绑定更改事件?,backbone.js,Backbone.js,我正在尝试加载国家/地区列表,并选择我只想发出警报的国家/地区,但不知何故,我无法捕获选择框的更改事件 谁能帮帮我吗 下面是html中带有模板脚本的视图、模型和集合部分的代码 <!DOCTYPE html> <html> <head> <title>Backbone</title> </head> <body> <script type="text/template" id="cou
<!DOCTYPE html>
<html>
<head>
<title>Backbone</title>
</head>
<body>
<script type="text/template" id="country_select_template">
<select id="country-selector">
<% _.each(countries, function(country) {%>
<option value="<%= country.fipsCode %>"><%= country.countryName %></option>
<% }); %>
</select>
</script>
<div id="country_select_container">
Loading country...
</div>
<!--div>
<select id="state" disabled=true>
<option value="NAN">Select State</option>
</select>
</div>
<div>
<select id="city" disabled=true>
<option value="NAN">Select City</option>
</select>
</div-->
</div>
<ul id="names-list">
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
Country = Backbone.Model.extend();
CountryList = Backbone.Collection.extend({
model : Country,
url : "https://dl.dropbox.com/u/18190667/countryList.json",
parse : function(response) {
return response.geonames;
}
});
Countries = new CountryList();
CountryView = Backbone.View.extend({
events: {
"change #country-selector": "countrySelected"
},
countrySelected: function(){
alert("You can procceed!!!");
},
countrySelected :function(){
alert("Procceed");
},
initialize: function(){
var countries = [];
var self = this;
Countries.fetch({
success: function(){
self.render();
}
});
},
render: function(){
var self = this;
var country_select_template = _.template($("#country_select_template").html(), {
countries: Countries.toJSON(),
});
$('#country_select_container').html(country_select_template);
return this;
}
});
var view = new CountryView();
</script>
</body>
</html>
骨干
装货国。。。
Country=Backbone.Model.extend();
CountryList=Backbone.Collection.extend({
型号:国家,
url:“https://dl.dropbox.com/u/18190667/countryList.json",
解析:函数(响应){
返回response.geonames;
}
});
国家=新的国家列表();
CountryView=Backbone.View.extend({
活动:{
“更改#国家/地区选择器”:“已选择国家/地区”
},
countrySelected:函数(){
警报(“您可以处理!!!”;
},
countrySelected:函数(){
警报(“已处理”);
},
初始化:函数(){
var国家=[];
var self=这个;
Countries.fetch({
成功:函数(){
self.render();
}
});
},
render:function(){
var self=这个;
var country_select_template=.template($(“#country_select_template”).html(){
国家:countries.toJSON(),
});
$('country\u select\u container').html(country\u select\u模板);
归还这个;
}
});
var view=newcountryview();
必须将视图绑定到现有DOM元素。试试这个:
CountryView = Backbone.View.extend({
el:'#country-selector',
events: {
"change #country-selector": "countrySelected"
},
...
或者,您可以将el
参数作为参数传递给构造函数:
newcountryview({el:'#国家选择器'})代码>
如果未将el
绑定到现有DOM元素,则默认情况下主干将其绑定到div。因此,您的事件将在查找div>#国家/地区选择器时被触发,并且不会匹配,因为不存在此类元素。请尝试以下操作:
CountryView = Backbone.View.extend({
el: $("#country_select_container"),
template: _.template($("#country_select_template").html()),
events: {
"change #country-selector": "countrySelected"
},
countrySelected: function(){
alert("You can procceed!!!");
},
initialize: function(){
var self = this;
Countries.fetch({
success: function(){
self.render();
}
});
},
render: function(){
this.$el.html(
this.template({countries: Countries.toJSON()})
);
return this;
}
});
要查看更多信息,希望这会有所帮助:)我尝试了新的CountryView({el:'#country selector'});但还是不能警觉?还有其他建议吗?Uncaught TypeError:无法调用undefined@this.$el.html语句的方法“html”?有什么想法吗?但是$(this.el).html(…)对me@Urvish:我猜您使用的是旧版本的backbone.js,新版本0.9有一个this.$el
快捷方式,用于$(this.el)
。Check here()el
应该是DOM对象,而不是jQuery对象el:document.getElementById('country\u select\u container')
或el:$('country\u select\u container')。获取(0)
您的答案不好,您应该在警报中输入新选择的值。”