0

el以下のように複数のビューに同じものを使用しています。私は今のところ問題に直面していません。これは良いアプローチですか、それとも変更を加える必要がありますか?

<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

Backbone Rule:

When you create an instance of a view, it'll bind all events to el if it was assigned, else view creates and assigns an empty div as el for that view and bind all events to that view.

In my case, if i assign #app-container to view 1 and view 2 as el and when i initialize both views like below in App View, all events bind to the same container (i.e #app-container)

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

Will it lead to any memory leaks / Zombies?

No way. No way. Because ultimately you are having only one instance for each view. So this won't cause any memory leaks.

Where does it become problematic?

When your app grows, it is very common to use same id for a tag in both views. For example, you may have button with an id btn-save in both view's template. So when you bind btn-save in both views and when you click button in any one the view, it will trigger both views save method.

See this jsFiddle. This'll explain this case.

Can i use same el for both view?

It is up to you. If you avoid binding events based on same id or class name in both views, you won't have any problem. But you can avoid using same id but it's so complex to avoid same class names in both views.

So for me, it looks @Daniel Perez answer is more promising. So i'm going to use his approach.

于 2013-10-16T06:24:31.960 に答える
0

私はそのような状況を処理するためにミックスインを使用します。これをステートビューと呼びます。他のすべてのオプションを持つビューの場合、「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 に答える