Wie man Änderungsereignis in Backbone bindet?

Ich versuche zu laden, Lande-Liste und wählen Sie das Land, das ich wollen einfach nur zu rufen, einen Alarm , aber irgendwie bin ich nicht in der Lage zu fangen change-Ereignis für die select-box.

Kann jemand mir bitte helfen?

hier ist der code mit der Ansicht, das Modell und die Sammlung Teil mit template-script 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>

InformationsquelleAutor der Frage Urvish | 2012-06-08

  1. 33

    Versuchen wie diesem:

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

    Für mehr info check hierund das wird hoffentlich hilfreich sein 🙂

    InformationsquelleAutor der Antwort mouad

  2. 0

    Müssen Sie binden den Blick zu einem bestehenden DOM-element. Versuchen Sie dies:

    CountryView = Backbone.View.extend({

    el:'#country-selector',

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

...

    Bzw. in deinem Fall übergeben Sie den el parameter als argument an den Konstruktor übergeben werden:

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

    Wenn Sie nicht zu binden el zu einem bestehenden DOM-element, Rückgrat binden es an ein div per default. So werden Ihre events werden gefeuert Suche nach div > #country-selector und wird nicht passen, da kein solches element vorhanden ist.

    InformationsquelleAutor der Antwort PhD

Schreibe einen Kommentar