根据需求在主干中扩展视图

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的一个实例，在this.tabs中都有3个成员。看起来像。我仍然认为自己是一个javascript新手，所以我要问，如果这是一个预期的行为?为什么会发生这种情况?我看了_的文件。扩展，它说它返回一个副本而不是引用。所以我对这件事的发生有点惊讶。

Answer 1

tabs属性附加到SidebarView。这意味着它是在RightSidebarView和LeftSidebarView实例之间共享的。你在extend方法中作为配置选项发送的所有内容都将覆盖基类原型并共享——就像面向对象语言中的静态属性一样!这意味着您必须更改实现以初始化initialize方法中的制表符，如:

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