Inheritance Backbone View

Question

Tôi đang cố gắng viết một khung nhìn Backbone cho một trình duyệt đối tượng được thiết kế để được triển khai ở một vài nơi với các kiểu đối tượng khác nhau và hoạt động hơi khác nhau. Làm thế nào tôi có thể đạt được một số tái sử dụng mã tốt.

Tôi đã thử đơn giản mở rộng khung nhìn xương sống trong trình duyệt của mình và sau đó mở rộng trình duyệt trong quá trình triển khai của tôi, tuy nhiên điều này khiến tôi có một số thuộc tính được chia sẻ. Đây là một hiệu ứng không mong muốn vì dữ liệu được nối vào tất cả các triển khai với mọi trình tạo trình duyệt.

Ai đó có thể làm sáng tỏ một cách để giải quyết vấn đề này hoặc có thể là giải pháp thay thế?

Dưới đây là một số ví dụ mã để cung cấp cho bạn một ý tưởng tốt hơn về cách nó hiện đang đứng:

var BrowserView = Backbone.View; 

    _.extend(BrowserView.prototype, Backbone.View.prototype, { 
     className: 'browser', 

     collections: [], 

     events: { 

     }, 

     _events:{ 

     }, 

      initialize: function() { 
      this._initialize(); 
     }, 

     render: function() { 
      this._render(); 
     }, 

     _initialize: function() { 
      this.container = $(this.make('div', {class: 'container'})); 

      this.$el.append(this.container); 

      if (this.options.collections) { 
       this.collections = []; 

       _.each(this.options.collections, this.add, this); 
      } 

      _.extend(this.events, this._events); 

      this.delegateEvents(); 
     }, 

     _render: function() { 
      this.container.empty(); 

      _.each(this.collections, function (view) { 
       this.container.append(view.el); 

       view.render(); 
      }, this); 
     } 
    }); 

    BrowserView.extend = Backbone.View.extend; 

    var ContactBrowserView = BrowserView.extend({ 

    }); 

Như mọi khi tôi hơn phản hồi chào đón liên quan đến bất kỳ khía cạnh của đoạn mã tôi đã cung cấp.

Cảm ơn bạn, Alex

EDIT Vấn đề của tôi là các lớp học phụ đang chia sẻ bộ sưu tập bất động sản. Đây là một ví dụ về giải pháp của riêng tôi mà khởi tạo thuộc tính bộ sưu tập thông qua một phương thức kế thừa. jsfiddle.net/JhZXh/3

Answer 1

ý chính này cho thấy một sự thay thế tốt hơn: https://gist.github.com/2287018

Answer 2

Thật khó để biết chính xác mục tiêu của bạn là gì.

nhưng đây là cách tôi nhìn thấy nó nếu bạn có một đối tượng xem

var myView = Backbone.View.extend({ 
    foo: "bar" 
}); 

và bạn có nó kéo dài tuổi backbone.View ... sau đó bạn thực sự có một đối tượng nhìn mới với tất cả mọi thứ của xương sống. xem và các tùy chọn bổ sung mà bạn cung cấp làm tham số.

nếu bạn sau đó đi và tạo ra một cái nhìn thứ hai, mà kéo dài của bạn đầu tiên một nó sẽ nhận được tất cả mọi thứ từ cái nhìn đầu tiên của bạn, + đó là tính năng bổ sung của riêng

var mySecondView = myView.extend({ 
    foobar: "f00b@r" 
}); 

nếu bạn muốn tạo một thể hiện của quan điểm thứ hai và đăng nhập nó foo sở hữu nó vẫn sẽ giữ "bar" như giá trị

var mySecondViewInstance = new mySecondView(); 
console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo); 
console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar); 

nếu tôi tạo một đối tượng mới của quan điểm đầu tiên của tôi, và thay đổi foo vào "changed-foo" nhật ký của foo trên mySecondViewInstance vẫn sẽ "bar"

var myViewInstance = new myView(); 
myViewInstance.foo = "changed-foo"; 
console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo); 
console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar); 

một JS-Fiddle để chơi xung quanh với nó có thể được tìm thấy ở đây: http://jsfiddle.net/saelfaer/uNBSW/

Answer 3

Kế thừa từ Backbone.View không làm việc, hoặc là khá phức tạp .

Bạn nên tạo một đối tượng thông thường, mà mỗi của tầm nhìn của bạn sẽ thừa hưởng từ, ví dụ:

var ViewInterface = { 
    events  : { /* ... */ }, 
    initialize : function (options) { /* ... */ }, 
    otherFunction : function (options) { /* ... */ }, 
} 

mỗi quan điểm của bạn sẽ mở rộng từ đối tượng này:

var BrowserView = Backbone.View.extend(_.extend(ViewInterface, { 
    anotherFunction : function (options) { /* ... */ }, 
}) 

var AnotherView = Backbone.View.extend(_.extend(ViewInterface, { 
    yetAnotherFunction : function (options) { /* ... */ }, 
}) 

Answer 4

Tôi nghĩ tôi đã tìm ra câu trả lời cho vấn đề của riêng tôi.

Tôi tin rằng đúng cách để đạt được những gì tôi đang tìm là di chuyển việc khởi tạo thuộc tính vào phương thức khởi tạo do khung nhìn Backbone cung cấp. Bằng cách này chúng được khởi tạo

var BrowserView = Backbone.View.extend({ 
    initialize: function() { 
     this.collections = []; 
    } 
}); 

var FileBrowserView = BrowserView.extend({ 
    initialize: function() { 
     BrowserView.prototype.initialize.apply(this); 

     this.collections.push({name: 'Example Collection' + Math.rand()}); 
    } 
}); 


var FileBrowserInstance1 = new FileBrowserView; 
console.log(FileBrowserInstance1.collections); 

var FileBrowserInstance2 = new FileBrowserView; 
console.log(FileBrowserInstance2.collections); 

Tới đây để fiddle http://jsfiddle.net/yssAT/2/