Cómo vincular evento de cambio en Backbone?

Estoy tratando de cargar la lista de países y al seleccionar el país solo quiero llamar a una alerta, pero de alguna manera no puedo ver el evento de cambio para el cuadro de selección.Cómo vincular evento de cambio en Backbone?

¿Alguien puede ayudarme?

aquí es el código de la vista, de modelo y la recolección con la escritura plantilla en 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>

Fuente

2012-06-08 Urvish

Trate de esta manera:

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

Para más información consultar here, y es de esperar que esto sea útil :)

Fuente

2012-06-08 12:23:12 mouad

TypeError no capturado: ¿No se puede llamar al método 'html' de undefined @ this. $ El.html statement? ¿alguna idea? pero $ (this.el) .html (...) funcionó para mí – Urvish

@Urvish: supongo que estás usando una versión anterior de backbone.js, la nueva versión 0.9 tiene '' this. $ El' 'atajo para' '$ (this.el)' '. Compruebe aquí (http://documentcloud.github.com/backbone/#upgrading) – mouad

'el' se supone que es un objeto DOM no un jQuery. 'el: document.getElementById ('country_select_container')' o 'el: $ ('# country_select_container'). Get (0)' –

Debe vincular la vista a un elemento DOM existente. Prueba esto:

CountryView = Backbone.View.extend({ 

    el:'#country-selector', 

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

...

o en su caso se puede pasar el parámetro el como un argumento para el constructor:

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

Si no se unen el a un elemento DOM existente, columna vertebral lo vinculará a un div por defecto. Por lo tanto, sus eventos serán despedidos buscando div > #country-selector y no coincidirán ya que no existe dicho elemento.

Fuente

2012-06-08 12:06:21 PhD

Traté nueva Countryview ({EL: '# país selector'}); pero aún no puede alertar? cualquier otra sugerencia? – Urvish

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

Cómo vincular evento de cambio en Backbone?

Respuesta

Cuestiones relacionadas