在嵌套的骨干(木偶)模型/集合中冒泡事件

Bubbling events in nested Backbone (Marionette) Models / Collections

本文关键字：集合 事件 模型 嵌套 木偶      更新时间：2023-09-26

我们有一个大型的木偶应用程序，它使用Backbone.trackit来监控我们模型中未保存的更改。

我们现在有一些嵌套模型，实际上我们有一个模型，一个模型集合，包含一个模型集合。

trackit不支持在子模型发生变化时将顶级模型标记为"脏"——由于主干不冒泡这些变化事件。

我知道我们可以手动监控这些变化事件，但我正在寻找一个通用的解决方案。

有没有人有以下库或任何其他解决方案的经验?

  1. backbone-deep-model
  2. 骨干协会事件
  3. 自定义Backbone.Model.set覆盖气泡改变事件

直接的要求是让trackit工作与嵌套的事件-但我找不到任何分支trackit添加这个。

所以我想知道是否有人已经接近了这一点，或者将上述库与trackit结合使用?

理想情况下，如果一个库会触发一个标准的'更改'事件，然后trackit会选择这个并开始工作。

所以，如果model.countries[3].regions[4].name改变了，change:countries事件将在model上触发。因此，如果模型启用了trackit，它就会正常工作!

集合内模型的事件在默认情况下已经冒泡到集合中。所以这是一个问题，我们只需要从一个集合或另一个模型中的一个模型冒泡事件。

我看到冒泡事件的一个问题是向上的层次结构是，当你想听特定集合或模型时，你会得到假阳性。

避免这种情况的一种方法是命名冒泡的事件，但这可能不适用于trackit。

一个模型的简单实现，允许冒泡任意集合或其他嵌套模型的事件:

var BubblingModel = Backbone.Model.extend({
    /**
     * Bubbles up any event triggered by 'object'.
     * @param {Backbone.Events} obj which implement the Backbone Events.
     * @param {String} key optional namespace name, default to 'nested'.
     */
    addNested: function(obj, key) {
        return this.listenTo(obj, 'all', function() {
            arguments[0] = (key || 'nested') + ':' + arguments[0];
            this.trigger.apply(this, arguments);
        });
    },
    removeNested: function(obj) {
        return this.stopListening(obj);
    }
});

和使用它:

var collection = new Backbone.Collection(),
    model = new BubblingModel();
model.addNested(collection, 'optional-key');

collection中的任何事件都将以其可选的key或默认的nested字符串作为前缀。collection触发的change:myAttribute事件为:

"optional-key:change:myAttribute"

概念验证与简单测试:

// The simple implementation
var BubblingModel = Backbone.Model.extend({
    /**
     * Bubbles up any event triggered by 'object'.
     * @param {Backbone.Events} obj which implement the Backbone Events.
     * @param {String} key optional namespace name, default to 'nested'.
     */
    addNested: function(obj, key) {
        return this.listenTo(obj, 'all', function() {
            arguments[0] = (key || 'nested') + ':' + arguments[0];
            this.trigger.apply(this, arguments);
        });
    },
    removeNested: function(obj) {
        return this.stopListening(obj);
    }
});
// Setting up a test with multiple nesting
var model5 = new Backbone.Model(),
    model4 = new Backbone.Model(),
    model3 = new BubblingModel({ model: model4 }),
    col2 = new Backbone.Collection([model3]),
    model2 = new BubblingModel({ col: col2 }),
    col1 = new Backbone.Collection([model2]),
    model1 = new BubblingModel({ col: col1 });
// Set which you want to bubble up.
model3.addNested(model4, 'model3-nested-model');
model2.addNested(col2, 'model2-nested-col')
    .addNested(model5);
model1.addNested(col1, 'model1-nested-col');
// listen from any model down the chain
Backbone.listenTo(model2, 'all', function(eventName) {
    console.log("model2:", eventName);
});
Backbone.listenTo(model1, 'all', function(eventName) {
    console.log("model1:", eventName);
});
// trigger default or custom events
model3.set('test', 1);
model3.trigger('model3');
model4.trigger('model4');
model5.trigger('model5');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

相关文章：