0

我使用相同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);
  }
}
4

3 回答 3

0

通过阅读您的问题，我并没有真正看到使用这种方法可能有什么优势，而不是将不同的div元素作为el您的观点 1、2、3 的根源并使用

this.$el.html(template)

在render方法中。

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

编辑

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

这是一个工作小提琴。顺便说一句，我通过收听单击事件来更改内容，但这是为了简化示例。它应该由路由器完成。

于 2013-10-15T10:18:34.940 回答
0

我确实使用 mixin 来处理这种情况，我称之为陈述视图。对于具有所有其他选项的视图，我将发送一个名为“state”的参数，render 将依次调用 renderState 第一次，然后每次我设置“state”时，renderState 都会更新视图状态。这是我的混合代码的样子。

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

希望这可以帮助

于 2013-10-15T16:35:05.550 回答
0

骨干规则：

当您创建视图的实例时，如果已分配，它将所有事件绑定到 el，否则视图创建并分配一个空 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 的答案更有希望。所以我打算用他的方法。

于 2013-10-16T06:24:31.960 回答