如何在Backbone中绑定更改事件？
如何在Backbone中绑定更改事件？
提问于 2012-06-08 19:50:14
我正在尝试加载国家/地区列表，并选择我只想调用警报的国家/地区，但不知何故，我无法捕获选择框的更改事件。
有人能帮帮我吗？
以下是包含视图、模型和集合部分的代码，以及html格式的模板脚本
<!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>回答 2
Stack Overflow用户
回答已采纳
发布于 2012-06-08 20:23:12
试着这样做：
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;
}
});有关更多信息，请查看here，希望这将对您有所帮助:)
Stack Overflow用户
发布于 2012-06-08 20:06:22
您必须将视图绑定到现有的DOM元素。试试这个：
CountryView = Backbone.View.extend({
el:'#country-selector',
events: {
"change #country-selector": "countrySelected"
},
...或者，在您的示例中，可以将el参数作为参数传递给构造函数：
new CountryView({el:'#country-selector'});
如果不将el绑定到现有DOM元素，backbone会默认将其绑定到div。因此，您的事件将被激发以查找div > #country-selector，并且不会匹配，因为不存在这样的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10948291
复制相关文章
相似问题