0

所以我使用的视图是带有标签的侧边栏，所以我创建了一个父类 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,

注意“标签：[]”数组。从它扩展的两个类仅具有填充选项卡的初始化函数：

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 菜鸟，所以我不得不问这是否是预期的行为？为什么会这样？我查看了 _.extend 的文档，它说它返回一个副本而不是参考。所以我对发生这种情况感到有点惊讶。

编辑：更好地制定了介绍，并稍微清理了代码。

4

2 回答 2

3

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

SidebarView:
initialize : function() {
    this.tabs = [];
}
RightSidebarView:
initialize: function() {
    RighitSidebarView.__super__.initialize.apply(this, arguments);
    // additinal initialization stuff...
}
于 2013-04-25T19:55:32.977 回答
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);
于 2013-04-25T20:20:05.203 回答