如何綁定Backbone中的更改事件？

我想加載國家列表，並選擇我只想調用警報的國家，但不知何故，我無法捕捉選擇框的更改事件。如何綁定Backbone中的更改事件？

有人可以幫我嗎？

這裏是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>

來源

2012-06-08 Urvish

嘗試這樣的：

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，並希望這將有助於:)

來源

2012-06-08 12:23:12 mouad

Uncaught TypeError：無法調用undefined @ this的方法'html'$ el.html語句？任何想法？但$（this.el）.html（...）爲我工作 – Urvish

@Urvish：我想你使用的是舊版本的backbone.js，新版本0.9有一個''this。$ el' ''$（this.el）''的快捷方式。點擊這裏（http://documentcloud.github.com/backbone/#upgrading） – mouad

'el'應該是一個不是jQuery的DOM對象。 'el：document.getElementById（'country_select_container'）'或'el：$（'＃country_select_container'）。get（0）' –

您必須綁定視圖，以現有的DOM元素與視圖，模型和收集部分與模板腳本代碼。試試這個：

CountryView = Backbone.View.extend({ 

    el:'#country-selector', 

    events: { 
     "change #country-selector": "countrySelected" 
    }, 

...

或者在你的情況，你可以通過el參數作爲參數的構造器：

new CountryView({el:'#country-selector'});

如果不綁定el到現有的DOM元素，骨幹將默認綁定到一個div。因此，您的活動將被解僱，尋找div > #country-selector，並且不會匹配，因爲不存在此類元素。

來源

2012-06-08 12:06:21 PhD

我嘗試新的CountryView（{EL： '＃國家選擇'}）;但仍然無法提醒？任何其他建議？ – Urvish

嘗試用'$（'＃country-selector'）'... – PhD

如何綁定Backbone中的更改事件？

回答

相關問題