Chế độ xem xương sống: Kế thừa và mở rộng các sự kiện từ cha mẹ

Tài liệu của Backbone tuyên bố:

Thuộc tính sự kiện cũng có thể được định nghĩa là một hàm trả về hàm băm sự kiện, để giúp xác định chương trình các sự kiện của bạn dễ dàng hơn, cũng như kế thừa chúng từ chế độ xem chính.

Làm thế nào để bạn kế thừa các sự kiện xem của cha mẹ và mở rộng chúng?

Chế độ xem phụ huynh

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

Chế độ xem trẻ em

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

Một cách là:

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

Một cách khác là:

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'
   }
});

Để kiểm tra xem Sự kiện là chức năng hay đối tượng

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

Câu trả lời của lính.moth là một câu hỏi hay. Đơn giản hóa hơn nữa bạn chỉ có thể làm như sau

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

Sau đó, chỉ cần xác định các sự kiện của bạn trong một trong hai lớp theo cách điển hình.

Bạn cũng có thể sử dụng defaultsphương thức để tránh tạo đối tượng trống {}.

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

Nếu bạn sử dụng CoffeeScript và đặt chức năng thành events, bạn có thể sử dụng super.

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

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

Sẽ không dễ dàng hơn để tạo trình xây dựng cơ sở chuyên biệt từ Backbone.View xử lý sự kế thừa của các sự kiện theo cấu trúc phân cấp.

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
}

Điều này cho phép chúng tôi giảm (hợp nhất) các sự kiện băm xuống cấu trúc phân cấp bất cứ khi nào chúng tôi tạo một 'lớp con' mới (hàm tạo con) bằng cách sử dụng hàm mở rộng được xác định lại.

# 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: ....
} 

Bằng cách tạo chế độ xem chuyên biệt: BaseView xác định lại chức năng mở rộng, chúng ta có thể có các cuộc phỏng vấn (như AppView, Mục Xem) muốn kế thừa các sự kiện khai báo của chế độ xem cha mẹ của chúng chỉ đơn giản bằng cách mở rộng từ BaseView hoặc một trong các dẫn xuất của nó.

Chúng tôi tránh sự cần thiết phải lập trình các hàm sự kiện của chúng tôi trong các cuộc phỏng vấn của chúng tôi, trong hầu hết các trường hợp cần phải tham khảo rõ ràng đến hàm tạo cha mẹ.

Phiên bản ngắn của đề xuất cuối cùng của @ Soldier.moth:

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

Điều này cũng sẽ làm việc:

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

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

Sử dụng thẳng superkhông làm việc cho tôi, hoặc là chỉ định thủ công ParentViewlớp hoặc kế thừa.

Truy cập vào _supervar có sẵn trong bất kỳ coffeescriptClass … 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-inherribution/

Đối với phiên bản xương sống 1.2.3, __super__hoạt động tốt và thậm chí có thể bị xiềng xích. Ví dụ:

// 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",
    }
    // ...
});

... mà - trong A_View.js- sẽ dẫn đến:

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

Tôi đã tìm thấy một giải pháp thú vị hơn trong bài viết này

Nó sử dụng của của Backbone siêu và hasOwnProperty ECMAScript của. Các ví dụ tiến bộ thứ hai của nó hoạt động như một nét duyên dáng. Đây là một đoạn mã:

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);
    },
    ...
});

Bạn cũng có thể làm điều đó cho ui và thuộc tính .

Ví dụ này không quan tâm đến các thuộc tính được thiết lập bởi một hàm, nhưng tác giả của bài viết đưa ra một giải pháp trong trường hợp đó.

Để thực hiện điều này hoàn toàn trong lớp cha và hỗ trợ hàm băm các sự kiện dựa trên hàm trong lớp con để trẻ có thể không được thừa kế (đứa trẻ sẽ phải gọi MyView.prototype.initializenếu nó ghi đè 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);
    };
  }
});

Giải pháp CoffeeScript này hoạt động với tôi (và tính đến đề xuất của @ Soldier.moth):

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

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

Nếu bạn chắc chắn rằng các ParentViewsự kiện được xác định là đối tượng và bạn không cần xác định động các sự kiện trong ChildViewđó thì có thể đơn giản hóa câu trả lời của Soldier.moth bằng cách loại bỏ chức năng và sử dụng _.extendtrực tiếp:

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

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

Một mẫu cho điều này mà tôi thích là sửa đổi hàm tạo và thêm một số chức năng bổ sung:

// 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'
        });
    }

});

Tôi thích phương pháp này vì bạn không phải xác định biến phụ huynh ít thay đổi. Tôi sử dụng logic tương tự cho attributesvà defaults.

Ồ, rất nhiều câu trả lời ở đây nhưng tôi nghĩ tôi sẽ cung cấp thêm một câu nữa. Nếu bạn sử dụng thư viện BackSupport, nó sẽ cung cấp extend2. Nếu bạn sử dụng, extend2nó sẽ tự động chăm sóc việc hợp nhất events(cũng như defaultscác thuộc tính tương tự) cho bạn.

Đây là một ví dụ nhanh:

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