0

そこで、タブを持つサイドバーであるビューを使用しているので、2 つの新しいクラスを拡張する親クラス 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: []」配列に注意してください。そこから拡張する 2 つのクラスには、タブを設定する初期化関数しかありません。

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

もう1つは次のとおりです。

/*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

後でプロパティの割り当てを使用しているため、タブを配列ではなくハッシュとして宣言するつもりだったと思います。 配列を使用できますが、プロパティを割り当てるのではなく、要素を配列にプッシュします。

タブ プロパティが拡張オブジェクトに存在しません。これは、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 に答える