javascript - Backbone.js - 如何将非状态 "event"从一个 View 发送到另一个 View ？

Question

假设我有一个应用程序有两个连接的 View - 主要内容区域中的某种表单元素，以及存储相关表单摘要的“侧边栏”。

我想在文本输入本身和摘要中代表它的 View 上创建一个简单的“flash”动画。这两个 View 位于 DOM 树的非常远的部分，因此将它们注册为其父 View 的 subview 并以这种方式冒泡事件是不切实际的。所以，表单字段(一个简单的输入类型=“文本”)有这个模型

//The model that manages these two views
var InputModel = Backbone.Model.extend({
    defaults: {
        flash: false
    }
})



//The view of the input field in the actual form - its this.model is an instance of InputModel
var InputFormView = Backbone.Model.extend({
    events: {
        'mousedown': 'clicked'
    }

    initialize: function() {
        this.render();
        this.model.on('change:flash', this.flash, this);
    },

    render: function() {
        return this; //The 'el' DOM element is passed to this view on creation
    },

    clicked: function() {
        this.model.set('flash', true);
    },

    flash: function(model) {
        if (model.changed.flash && model.changed.flash === true){
            //Do the 'flashing' animation using jQuery animate
        } else {
            this.model.set('flash', false);
        }
    }
});



//The summary column view - its this.model is an instance of InputModel
var InputSummaryView = Backbone.Model.extend({
    initialize: function() {
        this.render();
        this.model.on('change:flash', this.flash, this);
    },

    render: function() {
        return this; //The 'el' DOM element is passed to this view on creation
    },

    flash: function(model) {
        if (model.changed.flash && model.changed.flash === true){
            //Do the 'flashing' animation using jQuery animate
        } else {
            this.model.set('flash', false);
        }
    }
});

这在实践中绝对有效。我看到的问题有两个方面:

1. 现在我的模型中有一些属性，这些属性不是关于输入的有用数据。比如，“flash”是否为真在语义上不是有用的信息 - 它与数据的“表示”密切相关，而不是数据本身的内容，因此应该归属于 View 。
2. flash 字段要么会用有用的信息阻塞我的数据库，要么我需要在每次 save() 时将其过滤掉。

有什么办法可以避免这个问题吗？让两个非常遥远的观点参与基于事件的交流而不使用(或至少搞砸)他们的共享模型？

Answer 1

您肯定是正确的，您不想用该数据污染模型。实际上有一个更直接的选择:使用事件管理器。创建一个对象，其唯一工作是在您的应用程序中全局触发和响应事件。很高兴，Backbone.Events可以为您做这件事，正如文档所建议的那样:

var dispatcher = _.clone(Backbone.Events);

然后，您可以在 View 中执行 dispatcher.trigger('flash') 和 dispatcher.on('flash')。不过，我会将事件重命名为对实际发生的事情更有意义的事情。