Come associare l'evento di modifica in Backbone?

Sto tentando di caricare la lista dei paesi e selezionare il paese voglio solo chiamare un avviso, ma in qualche modo non riesco a rilevare l'evento di cambiamento per la casella di selezione.Come associare l'evento di modifica in Backbone?

Qualcuno può aiutarmi per favore?

Ecco il codice con la vista, il modello e la parte di raccolta di script per i modelli 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>

fonte

2012-06-08 Urvish

Prova in questo modo:

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; 
    } 
});

Per maggiori informazioni controllare here, e speriamo che questo sarà utile :)

fonte

2012-06-08 12:23:12 mouad

Unchaught TypeError: impossibile richiamare il metodo 'html' di undefined @ this. $ El.html statement? qualche idea? ma $ (this.el) .html (...) ha funzionato per me – Urvish

@Urvish: Immagino tu stia usando una vecchia versione di backbone.js, la nuova versione 0.9 ha un '' this. $ El' scorciatoia '' $ (this.el) ''. Controlla qui (http://documentcloud.github.com/backbone/#upgrading) – mouad

'el' dovrebbe essere un oggetto DOM non uno jQuery. 'el: document.getElementById ('country_select_container')' o 'el: $ ('# country_select_container'). Get (0)' –

È necessario associare la vista di un elemento DOM esistente. Prova questo:

CountryView = Backbone.View.extend({ 

    el:'#country-selector', 

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

...

O nel tuo caso è possibile passare il parametro el come argomento al costruttore:

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

Se non si associa el a un elemento DOM esistente, spina dorsale lo vincolerà a un div di default. Quindi i tuoi eventi verranno licenziati alla ricerca di div > #country-selector e non corrisponderanno poiché non esiste alcun elemento di questo tipo.

fonte

2012-06-08 12:06:21 PhD

ho provato nuovo Countryview ({el: '# country-selector'}); ma ancora non in grado di allertare? qualche altro suggerimento? – Urvish

Provare con '$ ('# country-selector')' ... – PhD

Come associare l'evento di modifica in Backbone?

risposta

Problemi correlati