Menu
I am trying to load country list and on select the country i just want to call an alert , but somehow I am not able to catch change event for the select box.
Can somebody please help me?
here is the code with the view, model and collection part with template script in 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>
919
Try like this:
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;
}
});
For more info check here, and hopefully this will be helpful :)
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
