बैकबोन में परिवर्तन घटना को कैसे बाध्य करें?

मैं देश की सूची लोड करने की कोशिश कर रहा हूं और देश का चयन करने के लिए मैं सिर्फ एक चेतावनी कॉल करना चाहता हूं, लेकिन किसी भी तरह से मैं चयन बॉक्स के लिए परिवर्तन घटना को पकड़ने में सक्षम नहीं हूं।बैकबोन में परिवर्तन घटना को कैसे बाध्य करें?

क्या कोई मेरी मदद कर सकता है?

यहाँ एचटीएमएल

<!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

अनकही टाइपरर: इसे अपरिभाषित @ html 'विधि' कॉल नहीं कर सकता है। $ El.html कथन? कोई उपाय? लेकिन $ (this.el) .html (...) मेरे लिए काम किया – Urvish

@Urvish: मुझे लगता है कि आप backbone.js का पुराना संस्करण उपयोग कर रहे हैं, नए संस्करण 0.9 में '' यह है। '' $ (this.el) '' के लिए शॉर्टकट। यहां देखें (http://documentcloud.github.com/backbone/#upgrading) – mouad

'el' को एक DOM ऑब्जेक्ट होना चाहिए जो jQuery नहीं है। 'el: document.getElementById ('country_select_container')' या 'el: $ ('# country_select_container') प्राप्त करें। (0)' –

आप एक मौजूदा DOM एलीमेंट का दृश्य आबद्ध करना होगा में देखने के लिए, मॉडल और टेम्पलेट स्क्रिप्ट के साथ संग्रह भाग के साथ कोड है। इस प्रयास करें:

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

यदि आप किसी मौजूदा DOM एलीमेंट का el बाध्य नहीं है, रीढ़ की हड्डी:

CountryView = Backbone.View.extend({ 

    el:'#country-selector', 

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

...

या आपके मामले में आप निर्माता के लिए एक तर्क के रूप el पैरामीटर पारित कर सकते हैं डिफ़ॉल्ट रूप से इसे एक div में बांध देगा। इस प्रकार आपकी घटनाओं को div > #country-selector की तलाश में निकाल दिया जाएगा और ऐसा कोई तत्व मौजूद नहीं होने के बाद से मेल नहीं खाएगा।

स्रोत

2012-06-08 12:06:21 PhD

मैं करने की कोशिश की नई Countryview हो जाएगा ({एल: '# देश-चयनकर्ता'}); लेकिन अभी भी सतर्क करने में सक्षम नहीं है? कोई अन्य सुझाव? – Urvish

'$ ('# देश-चयनकर्ता') के साथ प्रयास करें ... – PhD

बैकबोन में परिवर्तन घटना को कैसे बाध्य करें?

उत्तर

संबंधित मुद्दे