首页 > 编程语言> 文章详细

javascript – 嵌套Backbone(Marionette)模型/集合中的冒泡事件

2019-09-28 02:32:59 阅读：226 来源： 互联网

标签：backbone-events javascript backbone-js marionette backbone-js-collections

我们有一个大型的Marionette应用程序,它使用Backbone.trackit监视模型中未保存的更改.

我们现在有一些嵌套模型,实际上我们有一个Model,带有一个模型集合,其中包含一个模型集合.

当子模型发生变化时,trackit不支持将顶级模型标记为“脏” – 因为主干没有冒泡这些变化事件.

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

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

> backbone-deep-model
> Backbone Associations events
> Custom Backbone.Model.set override that bubbles change events

当前的要求是让trackit使用嵌套事件 – 但我找不到任何跟踪添加它的分支.

所以我想知道是否有人接触过这个,或者将上面的lib与trackit结合使用？

理想情况下,如果一个库会在链条上一直触发标准的“更改”事件,那么trackit就会接受这个并开始工作.

因此,如果model.countries [3] .regions [4] .name发生更改,则会在模型上触发更改：countries事件.因此,如果该模型具有轨迹,那么一切都会正常工作！

解决方法:

默认情况下,集合中模型的事件已经冒泡到集合中.这样就解决了一件事,我们只需要从模型中的集合或其他模型中冒泡.

我在冒泡事件中看到的一个问题是 – 当你想要听取特定的集合或模型时,你会得到误报.

避免这种情况的一种方法是命名冒泡的事件,但这可能不适用于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');

来自集合的任何事件都将以其可选键或默认嵌套字符串为前缀.更改：由集合触发的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>

标签：backbone-events,javascript,backbone-js,marionette,backbone-js-collections
来源： https://codeday.me/bug/20190928/1825348.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 嵌套Backbone(Marionette)模型/集合中的冒泡事件