Sub Class a Backbone.View Sub Class i zachowania zdarzeń

Question

Mam ogólną podklasę Backbone.View, która ma odbiornik zdarzeń close.

var GenericView = Backbone.View.extend({ 

    events : { 
     "click .close" : "close" 
    }, 

    close : function() { 
     console.log("closing view"); 
    } 

}); 

Chcę dokonać podklasy tej ogólnej klasy i dodać kilka nowych zdarzeń. Jednak poniższy tekst spowoduje nadpisanie super obiektu (powyżej) obiektu zdarzenia. Na przykład.

var ImplementedView = new GenericView({ 

    // setting this will stop 'close' in Super Class from triggering 
    events : { 
     "click .submit" : "submit" 
    } 

}); 

W jaki sposób utworzyć podklasę, w tym przypadku ImplementedView i zachować zdarzenia?

Znalazłem jeden sposób, aby to osiągnąć, rozszerzając obiekt zdarzenia, gdy konstruowana jest klasa potomna. Jednak muszę ponownie uruchomić this.delegateEvents(), który, jak sądzę, nie jest dobry. Czy ktoś może to komentować?

var ImplementedView = new GenericView({ 

    initialize : function (options) { 

     _.extend(this.events, { 
      "click .submit" : "submit" 
     }); 

     // re-attach events 
     this.delegateEvents(); 
    } 

}); 

Answer 1

@Nupul jest dokładnie rację: nie jesteś instacji swoją GenericView.

W rzeczywistości podklasowanie nie jest tutaj właściwym słowem, ponieważ JavaScript nie dziedziczy klasycznego dziedziczenia.

Więc najpierw postarać się zrozumieć, co się dzieje tutaj:

var GenericView = Backbone.View.extend(propertiesObj, classPropertiesObj) 

Backbone.View jest funkcją konstruktora, że ​​po wywołaniu ze słowem kluczowym new, tworzy nowy obiekt dla Ciebie.

Ponieważ jest JS, wszystkie funkcje są naprawdę funkcjonują obiekty, więc Backbone.View.extend jest tylko funkcja dyndał Backbone.View że robi kilka rzeczy:

1. konfiguruje łańcuch prototypów, dzięki czemu można uzyskać dostęp do właściwości i funkcje zdefiniowane w „bazie” zadzwoń klasa
2. tworzy i zwraca nową funkcję konstruktora można zadzwonić (który tutaj byłby GenericView) instancji obiektów klasy dziedziczenie
3. kopiuje się być funkcją wiszące off funkcja konstruktora, którą zwraca aby móc dalej dziedziczyć.

więc poprawny sposób założyć łańcuch protoype chcesz to:

var ImplementedView = GenericView.extend({ 
    // implementation goes here 
}); 

a NIE:

var ImplementedView = new GenericView({//stuff}); 

ponieważ to właśnie tworzy nową instancję GenericView.

Teraz, nadal masz problem, bo gdy zrobisz coś takiego:

var impl_view = new ImplementedView; 

impl_view.events; // This isn't merged with the events you created 
        // for the GenericView 

W tym momencie istnieją różne sposoby, aby uzyskać wynik, który chcesz, tutaj jest jeden, który wykorzystuje delegateEvents niby jak, w jaki sposób zrobił. Używanie go nie jest złe, nawiasem mówiąc.

var GenericView = Backbone.View.extend({ 

    genericEvents: { 'click .close': 'close' }, 

    close: function() { console.log('closing view...'); } 

}); 

var ImplView = GenericView.extend({ 

    events: { 'click .submit': 'submit' }, 

    initialize: function(options) { 
    // done like this so that genericEvents don't overwrite any events 
    // we've defined here (in case they share the same key) 
    this.events = _.extend({}, this.genericEvents, this.events); 
    this.delegateEvents() 
    } 
}); 

Answer 2

Można znaleźć to przydatne: http://kalimotxocoding.blogspot.com/2011/03/playing-with-backbonejs-views.html

sekund Co Wspomniałem o _.extend(...) i co masz obecnie ...

Answer 3

Inną opcją jest posiadanie BaseView, który zastępuje implementację Extend. Takich jak:

var BaseView = Backbone.View.extend({ 
     //base view functionality if needed 
    }); 
BaseView.extend = function(child){ 
    var view = Backbone.View.extend.apply(this, arguments); 
    view.prototype.events = _.extend({}, this.prototype.events, child.events); 
    return view; 
}; 

Spowoduje to automatyczne rozszerzenie wszystkich wydarzeń dla wszystkiego, co dziedziczy z BaseView.

Answer 4

Lubię rozwiązanie pana golarka, ale czegoś mniej inwazyjny:

var ChildView = ParentView.extend({ 
    events : _.extend({ 
     "change input": "handleInputChange" 
    }, ParentView.prototype.events) 
}); 

Edit: Tak, trzeba to zrobić w każdej klasie dzieci, ale jest to przydatne, gdy są potrzebne tylko kilka dzieci lub gdy nie kontrolujesz macierzystej "klasy".

Answer 5

Oto rozwiązanie, które działa dobrze dla mnie. Możesz użyć obiektu zdarzeń zarówno w podrzędnej jak i podklasie bez rozszerzania w nim każdej podklasy. Po prostu przedłużyć go raz w klasie nadrzędnej:

APP.Views.GenericWizard = Backbone.View.extend({ 
    events: { 
    'click .btn-prev' : function(){} 
    }, 
    initialize: function() { 
    _(this.events).extend(APP.Views.GenericWizard.prototype.events); 
    } 
}); 

APP.Views.RegisterWizard = APP.Views.GenericWizard.extend({ 
    events: { 
    'blur #username' : function(){} 
    }, 
}); 

var registerWizard = new APP.Views.RegisterWizard(); 
console.log(registerWizard.events); 
// Object {blur #username: function, click .btn-prev: function}