Я пытаюсь загрузить список стран и выбрать страну, в которой я просто хочу вызвать предупреждение, но почему-то я не могу поймать событие изменения для поля выбора.
Может кто-нибудь, пожалуйста, помогите мне?
вот код с частью представления, модели и коллекции с шаблоном script в 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>