骨干>绑定号码选择选项

Question

我有一个选择的多项选择（像这样），我不知道如何在backbonejs中进行一个事件，以检测何时获得或丢失项目。

最初我做了这样的事情：

var view = new Backbone.View.extend({
    initialize : function() {
        ...
    },
    events : {
        "change select" : "changed"
    }
});

但是，此示例，唯一检测到它是关于所选项目的，而不是添加或删除的。

有什么想法吗？谢谢。

Answer 1

有DOM突变事件，但已弃用：

弃用
此功能已从网络中删除。尽管有些浏览器仍可能支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时破裂。

突变事件已被突变操作器替换，但是如果您尝试使用它们，则可能会有浏览器兼容性问题。

所有这些都没有；如果您构建视图，以使#add和#remove按钮在视图内部，则可以使用简单（并在各处得到可靠且受支持的）骨干视图事件来处理所有内容。这样的东西：

<div id="container">
    <select id="select_1" ...>
    <input id="add" ...>
    <input id="remove" ...>
    <select id="select_2" ...>
</div>

，然后在您的视图中：

Backbone.View.extend({
    el: '#container',
    events: {
        'click #add': 'add',
        'click #remove': 'remove'
    },
    add: function() {
        var opt = this.$('#select_1 option:selected').clone();
        this.$('#select_2').append(opt);
    },
    remove: function() {
        this.$('#select_2 option:selected').remove();
    }
});

请注意，在视图中使用this.$，视图中的this.$(x)与this.$el.find(x)相同；这并不是严格必要的，但这是一个很好的习惯。

如果您的视图在第二个列表中添加新条目或从第二个列表中删除条目时需要做更多的事情，则可以将这些内容放入add和remove方法中。如果其他人需要知道，那么您可以：

1. 触发事件在他查看并让应用程序的其他部分聆听这些事件。
2. 通过全局事件总线触发事件，并将应用程序的其他部分列出到活动总线。
3. 将更改应用于视图的集合或模型，并让应用程序的其他部分收听该集合或模型的事件。

演示：http：//jsfiddle.net/ambigous/uahl3/1/

Answer 2

您可以尝试收听domnodeinsert和domnoderemaid的事件

$('#select_2').on('DOMNodeInserted', function (e) {alert('node added')});
$('#select_2').on('DOMNodeRemoved', function (e) {alert('node removed')});

示例 -> jsfiddle