Omurga Görünümü: Etkinlikleri üst öğeden devralın ve genişletin

Omurga dokümantasyonunun durumu:

Olaylar özelliği, olaylarınızı programlı olarak tanımlamanın yanı sıra bunları üst görünümlerden devralmayı kolaylaştırmak için bir olay hash'i döndüren bir işlev olarak da tanımlanabilir.

Bir ebeveynin görüş olaylarını nasıl devralır ve onları genişletirsiniz?

Ebeveyn Görünümü

var ParentView = Backbone.View.extend({
   events: {
      'click': 'onclick'
   }
});

Çocuk Görünümü

var ChildView = ParentView.extend({
   events: function(){
      ????
   }
});

Bunun bir yolu:

var ChildView = ParentView.extend({
   events: function(){
      return _.extend({},ParentView.prototype.events,{
          'click' : 'onclickChild'
      });
   }
});

Bir diğeri:

var ParentView = Backbone.View.extend({
   originalEvents: {
      'click': 'onclick'
   },
   //Override this event hash in
   //a child view
   additionalEvents: {
   },
   events : function() {
      return _.extend({},this.originalEvents,this.additionalEvents);
   }
});

var ChildView = ParentView.extend({
   additionalEvents: {
      'click' : ' onclickChild'
   }
});

Olayların işlev mi yoksa nesne mi olduğunu kontrol etmek için

var ChildView = ParentView.extend({
   events: function(){
      var parentEvents = ParentView.prototype.events;
      if(_.isFunction(parentEvents)){
          parentEvents = parentEvents();
      }
      return _.extend({},parentEvents,{
          'click' : 'onclickChild'
      });
   }
});

Asker.moth cevabı iyi bir cevap Daha da basitleştirerek aşağıdakileri yapabilirsiniz

var ChildView = ParentView.extend({
   initialize: function(){
       _.extend(this.events, ParentView.prototype.events);
   }
});

Ardından, olaylarınızı her iki sınıfta da tipik bir şekilde tanımlayın.

defaultsBoş nesneyi oluşturmaktan kaçınmak için yöntemi de kullanabilirsiniz {}.

var ChildView = ParentView.extend({
  events: function(){
    return _.defaults({
      'click' : 'onclickChild'
    }, ParentView.prototype.events);
  }
});

CoffeeScript kullanır ve bir işlevi olarak eventsayarlarsanız, kullanabilirsiniz super.

class ParentView extends Backbone.View
  events: ->
    'foo' : 'doSomething'

class ChildView extends ParentView
  events: ->
    _.extend {}, super,
      'bar' : 'doOtherThing'

Backbone.View'dan, hiyerarşideki olayların kalıtımını yöneten özel bir temel oluşturucu oluşturmak daha kolay olmaz mıydı.

BaseView = Backbone.View.extend {
    # your prototype defaults
},
{
    # redefine the 'extend' function as decorated function of Backbone.View
    extend: (protoProps, staticProps) ->
      parent = this

      # we have access to the parent constructor as 'this' so we don't need
      # to mess around with the instance context when dealing with solutions
      # where the constructor has already been created - we won't need to
      # make calls with the likes of the following:   
      #    this.constructor.__super__.events
      inheritedEvents = _.extend {}, 
                        (parent.prototype.events ?= {}),
                        (protoProps.events ?= {})

      protoProps.events = inheritedEvents
      view = Backbone.View.extend.apply parent, arguments

      return view
}

Bu, yeniden tanımlanmış genişletme işlevini kullanarak yeni bir 'alt sınıf' (alt sınıf oluşturucu) oluşturduğumuzda olayları hiyerarşiyi azaltmamızı (birleştirmemizi) sağlar.

# AppView is a child constructor created by the redefined extend function
# found in BaseView.extend.
AppView = BaseView.extend {
    events: {
        'click #app-main': 'clickAppMain'
    }
}

# SectionView, in turn inherits from AppView, and will have a reduced/merged
# events hash. AppView.prototype.events = {'click #app-main': ...., 'click #section-main': ... }
SectionView = AppView.extend {
    events: {
        'click #section-main': 'clickSectionMain'
    }
}

# instantiated views still keep the prototype chain, nothing has changed
# sectionView instanceof SectionView => true 
# sectionView instanceof AppView => true
# sectionView instanceof BaseView => true
# sectionView instanceof Backbone.View => also true, redefining 'extend' does not break the prototype chain. 
sectionView = new SectionView { 
    el: ....
    model: ....
} 

Özel bir görünüm oluşturarak: genişletme işlevini yeniden tanımlayan BaseView, üst görünümlerinin bildirilen olaylarını miras almak isteyen alt görünümlere (AppView, SectionView gibi) sahip olabiliriz, bunu BaseView veya türevlerinden birinden genişleterek yapar.

Olay işlevlerimizi alt görünümlerimizde programlı olarak tanımlama ihtiyacından kaçınıyoruz, çoğu durumda ana kurucuya açıkça atıfta bulunmamız gerekir.

@ Soldier.moth'un son önerisinin kısa versiyonu:

var ChildView = ParentView.extend({
  events: function(){
    return _.extend({}, _.result(ParentView.prototype, 'events') || {}, {
      'click' : 'onclickChild'
    });
  }
});

Bu aynı zamanda işe yarar:

class ParentView extends Backbone.View
  events: ->
    'foo' : 'doSomething'

class ChildView extends ParentView
  events: ->
    _.extend({}, _.result(_super::, 'events') || {},
      'bar' : 'doOtherThing')

Düz kullanmak superbenim için işe yaramıyordu, ya manuel olarak ParentViewya da miras alınan sınıfı belirliyordu.

_superHerhangi bir kahve dosyasında bulunan değişkene erişimClass … extends …

// ModalView.js
var ModalView = Backbone.View.extend({
	events: {
		'click .close-button': 'closeButtonClicked'
	},
	closeButtonClicked: function() { /* Whatever */ }
	// Other stuff that the modal does
});

ModalView.extend = function(child) {
	var view = Backbone.View.extend.apply(this, arguments);
	view.prototype.events = _.extend({}, this.prototype.events, child.events);
	return view;
};

// MessageModalView.js
var MessageModalView = ModalView.extend({
	events: {
		'click .share': 'shareButtonClicked'
	},
	shareButtonClicked: function() { /* Whatever */ }
});

// ChatModalView.js
var ChatModalView = ModalView.extend({
	events: {
		'click .send-button': 'sendButtonClicked'
	},
	sendButtonClicked: function() { /* Whatever */ }
});

http://danhough.com/blog/backbone-view-inheritance/

Backbone sürüm 1.2.3 için __super__iyi çalışır ve hatta zincirlenebilir. Örneğin:

// A_View.js
var a_view = B_View.extend({
    // ...
    events: function(){
        return _.extend({}, a_view.__super__.events.call(this), { // Function - call it
            "click .a_foo": "a_bar",
        });
    }
    // ...
});

// B_View.js
var b_view = C_View.extend({
    // ...
    events: function(){
        return _.extend({}, b_view.__super__.events, { // Object refence
            "click .b_foo": "b_bar",
        });
    }
    // ...
});

// C_View.js
var c_view = Backbone.View.extend({
    // ...
    events: {
        "click .c_foo": "c_bar",
    }
    // ...
});

... hangi - içinde A_View.js- sonuçlanır:

events: {
    "click .a_foo": "a_bar",
    "click .b_foo": "b_bar",
    "click .c_foo": "c_bar",
}

Bunda daha ilginç çözümler buldum makalede

Bu omurga en kullanımı süper ve ECMAscript en hasOwnProperty. İlerici örneklerinden ikincisi bir cazibe gibi çalışıyor. İşte biraz kod:

var ModalView = Backbone.View.extend({
    constructor: function() {
        var prototype = this.constructor.prototype;

        this.events = {};
        this.defaultOptions = {};
        this.className = "";

        while (prototype) {
            if (prototype.hasOwnProperty("events")) {
                _.defaults(this.events, prototype.events);
            }
            if (prototype.hasOwnProperty("defaultOptions")) {
                _.defaults(this.defaultOptions, prototype.defaultOptions);
            }
            if (prototype.hasOwnProperty("className")) {
                this.className += " " + prototype.className;
            }
            prototype = prototype.constructor.__super__;
        }

        Backbone.View.apply(this, arguments);
    },
    ...
});

Bunu kullanıcı arabirimi ve öznitelikler için de yapabilirsiniz .

Bu örnek, bir işlev tarafından ayarlanan özelliklerle ilgilenmez, ancak makalenin yazarı bu durumda bir çözüm sunar.

Bunu tamamen ana sınıfta yapmak ve çocuk sınıfta işlev tabanlı olaylar karmasını desteklemek için, böylece çocuklar kalıtım konusunda agnostik olabilir ( MyView.prototype.initializegeçersiz kılarsa çocuğun çağırması gerekir initialize):

var MyView = Backbone.View.extend({
  events: { /* ... */ },

  initialize: function(settings)
  {
    var origChildEvents = this.events;
    this.events = function() {
      var childEvents = origChildEvents;
      if(_.isFunction(childEvents))
         childEvents = childEvents.call(this);
      return _.extend({}, MyView.prototype.events, childEvents);
    };
  }
});

Bu CoffeeScript çözümü benim için çalıştı (ve @ asker.moth'un önerisini dikkate alır):

class ParentView extends Backbone.View
  events: ->
    'foo' : 'doSomething'

class ChildView extends ParentView
  events: ->
    _.extend({}, _.result(ParentView.prototype, 'events') || {},
      'bar' : 'doOtherThing')

Eğer eminseniz ParentViewnesne olarak tanımlanan olayları vardır ve dinamik olayları tanımlamak gerekmez ChildViewo fonksiyonun kurtulmak alma ve kullanarak daha da soldier.moth cevabını kolaylaştırmak mümkündür _.extenddoğrudan:

var ParentView = Backbone.View.extend({
    events: {
        'click': 'onclick'
    }
});

var ChildView = ParentView.extend({
    events: _.extend({}, ParentView.prototype.events, {
        'click' : 'onclickChild'
    })
});

Bunun için çok sevdiğim bir model, kurucuyu değiştirmek ve bazı ek işlevler eklemek:

// App View
var AppView = Backbone.View.extend({

    constructor: function(){
        this.events = _.result(this, 'events', {});
        Backbone.View.apply(this, arguments);
    },

    _superEvents: function(events){
        var sooper = _.result(this.constructor.__super__, 'events', {});
        return _.extend({}, sooper, events);
    }

});

// Parent View
var ParentView = AppView.extend({

    events: {
        'click': 'onclick'
    }

});

// Child View
var ChildView = ParentView.extend({

    events: function(){
        return this._superEvents({
            'click' : 'onclickChild'
        });
    }

});

Bu yöntemi tercih ediyorum çünkü değiştirmek için ebeveyni tanımlamanız gerekmiyor. Aynı mantığı attributesve için kullanıyorum defaults.

Vay canına, burada bir sürü cevap var ama bir tane daha vermeyi düşündüm. BackSupport kitaplığını kullanırsanız, size sunar extend2. Eğer kullanırsanız extend2, sizin için otomatik olarak birleştirme events( defaultsve benzeri mülkler) ile ilgilenir .

İşte hızlı bir örnek:

var Parent = BackSupport.View.extend({
    events: {
        change: '_handleChange'
    }
});
var Child = parent.extend2({
    events: {
        click: '_handleClick'
    }
});
Child.prototype.events.change // exists
Child.prototype.events.click // exists

https://github.com/machineghost/BackSupport