Question

我有一个选择多项选择（like this one），我不知道如何在BackboneJS中创建一个事件来检测选择何时获取或丢失项目。

最初我做了类似的事情：

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

但是这个例子，唯一能够检测到所选项目，而不是项目添加或删除。

有什么想法吗？感谢。

Answer 1

有DOM mutation events但它们已被弃用：

<强>已过时
此功能已从Web中删除。虽然有些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时中断。

突变事件已被MutationObservers取代，但如果您尝试使用它们，则可能会browser compatibility problems。

所有这一切都没有实际意义;如果您构建视图以便#add和#remove按钮位于视图内，那么您可以使用简单（可靠且受支持的）Backbone视图事件来处理所有内容。像这样：

<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方法中。如果其他人需要知道，那么你可以：

在他查看时触发事件，并让应用程序的其他部分监听这些事件。
通过全局事件总线触发事件，并让应用程序的其他部分列入事件总线。
将更改应用于视图的集合或模型，并让应用程序的其他部分侦听来自该集合或模型的事件。

演示：http://jsfiddle.net/ambiguous/uAHL3/1/

Answer 2

您可以尝试侦听DOMNodeInserted和DOMNodeRemoved事件

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

示例 - ＆gt; jsfiddle

骨干＆gt;绑定号码选择选项

2 个答案: