Расширение представлений в backbonejs с requirejs

Question

Так что я использую представления, которые являются боковыми панелями с вкладками в них, поэтому я создал родительский класс SidebarView, из которого я расширяю два новых класса. LeftSidebarView и RightSidebarView. здесь находится родительский класс:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'eventbus' 
], function ($, _, Backbone, eventBus) { 
    'use strict'; 
    var SidebarView = Backbone.View.extend({ 
    tabs: [], 
    isHidden: true, 
    alignment: '', 
    el : '', 
    templateId: '', 
    milliseconds: 300, 

Обратите внимание на массив «tabs: []». Два класса, которые выходят из него только инициализировать функцию в них, что населяет закладку:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'views/sidebar', 
    'eventbus', 
    'views/search' 
], function ($, _, Backbone, SidebarView, eventBus, SearchView) { 
    'use strict'; 
    var RightSidebarView = SidebarView.extend({ 
    alignment: 'right', 
    el: "#rightSidebar", 
    templateId: '#sidebarTemplate', 

    initialize : function() { 
     this.tabs['search'] = new SearchView({model: this.model}); 
    } 
    }); 
    return RightSidebarView; 
}); 

и другое одно:

/*global define*/ 
define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'views/sidebar', 
    'views/listings', 
    'views/listingDetails', 
    'eventbus' 
], function ($, _, Backbone, SidebarView, ListingsView, ListingDetailsView, eventBus) { 
    'use strict'; 
    var LeftSidebarView = SidebarView.extend({ 
    alignment: 'left', 
    el: "#leftSidebar", 
    templateId: '#sidebarTemplate', 

    initialize : function() { 
     this.tabs['listings'] = new ListingsView({collection: this.collection); 
     this.tabs['listingDetails'] = new ListingDetailsView(); 
    } 
    }); 

    return LeftSidebarView; 
}); 

В моем main.js файл я делаю это:

var leftSidebarView = new LeftSidebarView({collection:listings}); 
var rightSidebarView = new RightSidebarView({model: searchModel}); 

Что происходит, так это то, что leftSideBarView, являющийся экземпляром LeftSidebarView и rightSidebarView экземпляра RightSidebarView, имеет 3 члена внутри this.tabs. Это выглядит как. Я все еще считаю себя javascript noob, поэтому я должен спросить, является ли это ожидаемым поведением? Почему это происходит? Я просмотрел документацию _.extend, и он говорит, что возвращает копию, а не ссылку. Поэтому я удивлен этим.

изменить: сформулировал введение немного лучше и немного очистил код.

Answer 1

Свойство tabs привязано к SidebarView.prototype, что означает, что оно разделяется между экземплярами RightSidebarView и LeftSidebarView. Все, что вы отправляете в качестве параметров конфигурации в методе расширения, переопределит прототип базового класса и будет общим - как статические свойства в объектно-ориентированных языках! Это означает, что вам придется изменить реализацию для инициализации вкладки в инициализации метода, как:

SidebarView: 
initialize : function() { 
    this.tabs = []; 
} 
RightSidebarView: 
initialize: function() { 
    RighitSidebarView.__super__.initialize.apply(this, arguments); 
    // additinal initialization stuff... 
} 

Answer 2

Я предполагаю, что вы имели в виду, чтобы объявить язычки как хэш не массив, так как вы используете назначение свойства дальше вниз по линии , Вы можете использовать массив, но вставляете в него элементы, а не присваиваете свойства.

Свойство tabs не существует на ваших расширенных объектах. Он определен далее в цепочке прототипов на SidebarView. Вы можете видеть в этой скрипке, когда вы вызываете rightSidebar.hasOwnProperty ('tabs'), и он возвращает false.

http://jsfiddle.net/puleos/yAMR2/

var SidebarView = Backbone.View.extend({ 
    tabs: {}, 
    isHidden: true, 
    alignment: '', 
    el : '', 
    templateId: '', 
    milliseconds: 300 
}); 

var RightSidebarView = SidebarView.extend({ 
    alignment: 'right', 
    el: "#rightSidebar", 
    templateId: '#sidebarTemplate', 

    initialize : function() { 
     this.tabs['search'] = {type: "search"}; 
    } 
    }); 

var LeftSidebarView = SidebarView.extend({ 
    alignment: 'left', 
    el: "#leftSidebar", 
    templateId: '#sidebarTemplate', 

    initialize : function() { 
     this.tabs['listings'] = {type: "listings"}; 
     this.tabs['listingDetails'] = {type: "listing details"}; 
    } 
}); 

var rightSidebar = new RightSidebarView(); 
var leftSidebar = new LeftSidebarView(); 

console.log(rightSidebar.hasOwnProperty('tabs')); // false 
console.log(rightSidebar.tabs);