Backbone.js嵌套视图:引用还是事件?

时间:2012-04-13 18:18:50

标签: backbone.js

更有效的方法是,使用事件在嵌套视图之间进行通信,或保持引用以调用方法。以下示例显示了两个视图。外部视图响应click事件,然后可以使用事件或方法调用来使InnerView做出适当的响应。

InnerView = Backbone.View.extend({

    initialize: function() {
        this.model.bind('doSomethingEvent', this.doSomething);
    },

    doSomething: function() {
        // This could have been called from event/trigger
        // or from direction method invocation using reference.
    }
});


OuterView = Backbone.View.extend({

    events = {
        'click' : 'handleOutViewClick'
    },

    render: function() {

        // Create InnerView to render some model
        var innerView = new InnerView({model:this.model });

        $(this.el).append(innerView.render().el);

        // Could store a reference to the View?
        this.viewRef = innerView;
    },

    handleOutViewClick: function(e) {

        // Should this function use a reference to the InnerView instance:
        this.viewRef.doSomething();

        // Or should it trigger an event on this.model that 
        // the InnerView is bound to?
        this.someCollection.trigger('doSomethingEvent');
    }
});

1 个答案:

答案 0 :(得分:4)

可能单个方法调用比事件调度更有效,事件调度将涉及至少2个方法调用。但我不认为你需要关注技术上哪个更“有效”。除非这种情况每秒发生多次,否则您只能关注更清晰,更正确的代码。我认为最干净的模式取决于所传达的细节。这是我的偏好:

  1. 如果外观操作模型和集合很自然,并且内部视图通过正常的骨干模型/集合事件做出响应,那就是最干净的。

  2. 如果发生的事情与模型无关,请考虑一个“视图模型”模式,在这种模式下,您可以将视图状态的有趣位置建模,就像它是后端模型一样,即使您没有意图使该模型与服务器交互。然后将两个视图绑定到视图模型上的事件,并通过更改常见的“视图模型”实例进行协调。这是我用于复杂视图的模式,其中许多相互依赖的状态与服务器中的底层模型没有直接关联。

  3. 如果发生的事情并没有真正改变模型/集合,而且更像是特定于视图的事物,直接的方法调度将更直接,但也更紧密耦合。由你的判断决定何时由事件发送提供的松散耦合值得额外的复杂性和更难以控制的控制流程。