Jak powiązać zdarzenie zmiany w sieci szkieletowej?

Próbuję wczytać listę krajów i wybrać kraj, do którego chcę zadzwonić, ale nie jestem w stanie złapać zdarzenia zmiany w polu wyboru.Jak powiązać zdarzenie zmiany w sieci szkieletowej?

Czy ktoś może mi pomóc?

oto kod z widoku modelu i część kolekcji z skryptu szablonu w 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>

Źródło

2012-06-08 Urvish

Spróbuj tak:

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

Aby uzyskać więcej informacji sprawdź here i oby ten będzie pomocny :)

Źródło

2012-06-08 12:23:12 mouad

Uncaught TypeError: Nie można wywołać metody 'html' undefined @ this. $ El.html statement? dowolny pomysł? ale $ (this.el) .html (...) pracował dla mnie – Urvish

@Urvish: Domyślam się, że używasz starej wersji backbone.js, nowa wersja 0.9 ma '' this. $ El'' 'skrót do' '$ (this.el)' '. Sprawdź tutaj (http://documentcloud.github.com/backbone/#upgrading) – mouad

'el' ma być obiektem DOM, a nie jQuery. 'el: document.getElementById ('country_select_container')' lub 'el: $ ('# country_select_container'). Get (0)' –

musi wiązać widok do istniejącego elementu DOM. Spróbuj tego:

CountryView = Backbone.View.extend({ 

    el:'#country-selector', 

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

...

lub w przypadku można przekazać parametr el jako argument do konstruktora:

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

Jeśli nie wiążą el do istniejącego elementu DOM, szkieletowej domyślnie zwiąże go z div. W związku z tym Twoje wydarzenia zostaną zwolnione, szukając div > #country-selector i nie będą się one zgadzały, ponieważ taki element nie istnieje.

Źródło

2012-06-08 12:06:21 PhD

próbowałem nowy Countryview ({EL: '# kraj selektor'}); ale wciąż nie jesteś w stanie ostrzec? jakiejkolwiek innej sugestii? – Urvish

Spróbuj z '$ ('# country-selector')' ... – PhD

Jak powiązać zdarzenie zmiany w sieci szkieletowej?

Odpowiedz

Powiązane problemy