如何在其他地方绑定更改事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (29)

下面是带有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>
提问于
用户回答回答于

就像这样:

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

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

热门问答

腾讯云广州一区DNS变更,需要怎么操作?

思潮澎湃轻描淡写的生活,但思潮澎湃
推荐
我也收到相关的通知了,这里分享下~ 2019年1月31日,腾讯云将对广州地区旧的基础网络DNS服务器(10.225.30.181、10.225.30.223)进行下线。在此期间,腾讯云提供最新的DNS服务器供您更新使用。 我们建议您尽快将DNS服务器配置进行更新,并且我们为您提供...... 展开详请

看到 API 网关已支持前端类型为 WebSocket,有无相关文档?

Masonlu

腾讯 · 产品经理 (已认证)

推荐已采纳
websocket的demo模板已经上了前台,今天会全网发布,相关文档也在审核当中,我这里先把它贴到附件里,供参考。 Websocket 原理介绍.pdf Websocket 使用方法.pdf 届时,可以通过控制台选择demo直接创建ws的云函数。... 展开详请

一个用户加入多个群组,发现不同群组间消息互窜,怎么解决?

LemonLu

社区 · 运营 (已认证)

Less is more
推荐

在解析的时候需要根据群组ID处理,因为不同的群组消息有不同的群组ID的。

COS Javascript 上传图片putObject成功后没有返回ETag?

许金泉

腾讯 · 高级工程师 (已认证)

腾讯云COS前端开发
推荐

腾讯云通讯能做类似qq微信的语音通话的效果吗?

推荐

腾讯云通信IM只支持发送语音功能

如果需要实现语音通话功能可以集成实时音视频来实现

详情请参考https://cloud.tencent.com/product/trtc

腾讯云50G系统盘,购买的数据盘在挂载后没有D盘符只有E盘符,如何设置D盘符?

推荐
已购买数据盘的用户,需要格式化数据盘才可使用。 格式化数据盘 1. 登录 Windows 云服务器。 2. 单击【开始】-【服务器管理器】-【工具】-【计算机管理】-【存储】-【磁盘管理】。 3. 在磁盘 1 上右键单击,选择【联机】: 📷 4. 右键单击,选择【初始化磁盘】:...... 展开详请

所属标签

扫码关注云+社区