Backbone.js 如何在主干中绑定更改事件?

Backbone.js 如何在主干中绑定更改事件?,backbone.js,Backbone.js,我正在尝试加载国家/地区列表,并选择我只想发出警报的国家/地区,但不知何故,我无法捕获选择框的更改事件 谁能帮帮我吗 下面是html中带有模板脚本的视图、模型和集合部分的代码 <!DOCTYPE html> <html> <head> <title>Backbone</title> </head> <body> <script type="text/template" id="cou

我正在尝试加载国家/地区列表,并选择我只想发出警报的国家/地区,但不知何故,我无法捕获选择框的更改事件

谁能帮帮我吗

下面是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>

骨干
装货国。。。
Country=Backbone.Model.extend(); CountryList=Backbone.Collection.extend({ 型号:国家, url:“https://dl.dropbox.com/u/18190667/countryList.json", 解析:函数(响应){ 返回response.geonames; } }); 国家=新的国家列表(); CountryView=Backbone.View.extend({ 活动:{ “更改#国家/地区选择器”:“已选择国家/地区” }, countrySelected:函数(){ 警报(“您可以处理!!!”; }, countrySelected:函数(){ 警报(“已处理”); }, 初始化:函数(){ var国家=[]; var self=这个; Countries.fetch({ 成功:函数(){ self.render(); } }); }, render:function(){ var self=这个; var country_select_template=.template($(“#country_select_template”).html(){ 国家:countries.toJSON(), }); $('country\u select\u container').html(country\u select\u模板); 归还这个; } }); var view=newcountryview();
必须将视图绑定到现有DOM元素。试试这个:

CountryView = Backbone.View.extend({

    el:'#country-selector',

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

...
或者,您可以将
el
参数作为参数传递给构造函数:

newcountryview({el:'#国家选择器'})

如果未将
el
绑定到现有DOM元素,则默认情况下主干将其绑定到div。因此,您的事件将在查找
div>#国家/地区选择器时被触发,并且不会匹配,因为不存在此类元素。

请尝试以下操作:

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

要查看更多信息,希望这会有所帮助:)

我尝试了新的CountryView({el:'#country selector'});但还是不能警觉?还有其他建议吗?Uncaught TypeError:无法调用undefined@this.$el.html语句的方法“html”?有什么想法吗?但是$(this.el).html(…)对me@Urvish:我猜您使用的是旧版本的backbone.js,新版本0.9有一个
this.$el
快捷方式,用于
$(this.el)
。Check here()
el
应该是DOM对象,而不是jQuery对象
el:document.getElementById('country\u select\u container')
el:$('country\u select\u container')。获取(0)
您的答案不好,您应该在警报中输入新选择的值。”