Question

我正在使用相同的el来查看超过1个视图，如下所示。到目前为止我没有遇到任何问题。这是好方法还是应该做任何改变？

<div id="app">
     <div id="app-header"></div>
     <div id="app-container"></div>
     <div id="app-footer">
</div>

应用视图：

{
el: "#app",

v1: new View1(),
v2: new View2(),
render: function () {     
   if (cond1) {    
       this.v1.render();
   } else if (cond2) {    
       this.v2.render();
   }}
}

查看1：

{
  el: "#app-container",

  render: function (){
    this.$el.html(template);
  }
}

查看2：

{
  el: "#app-container",

  render: function (){
    this.$el.html(template);
  }
}

Answer 1

通过阅读您的问题，我并没有真正看到您使用此方法可能具有的优势，而不是将不同的div元素作为视图1,2,3和视图1,2 {3的根el。使用

this.$el.html(template)

在render方法中。

您的方法适用于小型应用程序，但我认为随着应用程序的增长，它将变得非常难以维护。

修改

我仍然不明白你的意思，你只能在两种情况下只初始化一次。

这是working Fiddle。顺便说一句，我通过监听click事件来改变内容，但这是为了简化示例。它应该由路由器完成。

Answer 2

我确实使用mixin来处理这种情况，我称之为陈述观点。对于包含所有其他选项的视图，我将发送一个名为'state'的参数，render将在第一次调用renderState时，每次设置'state'后，renderState将更新视图状态。这是我的mixin代码看起来像。

var setupStateEvents = function (context) {

    var stateConfigs = context.getOption('states');
    if (!stateConfigs) {
        return;
    }

    var state;
    var statedView;


    var cleanUpState = function () {
        if (statedView) {
            statedView.remove();
        }
    };

    var renderState = function (StateView) {
        statedView = util.createView({
            View: StateView,
            model: context.model,
            parentEl: context.$('.state-view'),
            parentView:context
        });
    };

    context.setState = function (toState) {
        if (typeof toState === 'string') {
            if (state === toState) {
                return;
            }
            state = toState;
            var StateView = stateConfigs[toState];
            if (StateView) {
                cleanUpState();
                renderState(StateView);
            } else {
                throw new Error('Invalid State');
            }

        } else {
            throw new Error('state should be a string');
        }
    };

    context.getState = function () {
        return state;
    };

    context.removeReferences(function(){
        stateConfigs = null;
        state=null;
        statedView=null;
        context=null;
    })

};

完整代码可以在这里看到

https://github.com/ravihamsa/baseapp/blob/master/js/base/view.js

希望这会有所帮助

Answer 3

骨干规则：

当您创建视图的实例时，它会将所有事件绑定到el if 它被分配，否则视图创建并为该视图分配一个空div作为el并绑定该观点的所有事件。

在我的情况下，如果我将#app-container分配给视图1并将视图2视为el，并且当我在App View中初始化两个视图时，所有事件都绑定到同一个容器（即＃app-container）

this.v1 = new App.View1();
this.v2 = new App.View2();

是否会导致任何内存泄漏/僵尸？

没办法。没门。因为最终每个视图只有一个实例。所以这不会导致任何内存泄漏。

哪里有问题？

当您的应用增长时，在两个视图中对标记使用相同的ID是很常见的。例如，在两个视图的模板中，您可能button的ID为btn-save。因此，当您在两个视图中绑定btn-save时，当您在任何一个视图中单击按钮时，它将触发两个视图保存方法。

见jsFiddle。这将解释这个案例。

我可以对两个视图使用相同的el吗？

由你决定。如果您避免在两个视图中基于相同的ID或类名绑定事件，则不会有任何问题。但是你可以避免使用相同的id，但是在两个视图中避免使用相同的类名是如此复杂。

所以对我而言，看起来@Daniel Perez的回答更有希望。所以我将使用他的方法。

BackboneJS - 同样适用于许多观点

3 个答案: