使用requirejs在backbonejs中擴展視圖

因此，我使用的視圖是在其中包含選項卡的邊欄，因此我創建了一個父類SidebarView，從中擴展了兩個新類。 LeftSidebarView和RightSidebarView。這裏是父類：使用requirejs在backbonejs中擴展視圖

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 noob，所以我必須問這是否是預期的行爲？爲什麼會發生？我查看了_.extend的文檔，它說它會返回一個不是引用的副本。所以我有點驚訝於這種情況。

編輯：制定了一些更好的介紹和清理代碼。

來源

2013-04-25 aledujke

這是一個有點不僅僅是調用擴展更加複雜。這裏有一篇文章讓你走上正軌。 http://stackoverflow.com/questions/7735133/backbone-js-view-inheritance – 2013-04-25 18:44:50

我的問題不是關於parrent函數沒有被調用，因爲我重寫了它們。我遇到的問題是leftSidebarView.tabs === rightSidebarView.tabs – aledujke 2013-04-25 18:52:07

tabs屬性附加到SidebarView.prototype，這意味着它在RightSidebarView和LeftSidebarView實例之間共享。在擴展方法中作爲配置選項發送的所有內容都將覆蓋基類原型，並且是共享的 - 就像面嚮對象語言中的靜態屬性一樣！這意味着，你將不得不改變，以初始化初始化方法的標籤，如實施：

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

來源

2013-04-25 19:55:32

謝謝。我會接受這個答案，因爲如果我要聲明多個非靜態變量，它會更加普遍地解決代碼中的混亂問題。 – aledujke 2013-04-26 09:46:44

我假設你的意思是不是一個數組，因爲你正在進一步使用財產分配上下行申報標籤作爲哈希。 你可以使用一個數組，但你可以將元素推入它，而不是分配屬性。

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-25 20:20:05

使用requirejs在backbonejs中擴展視圖

回答

相關問題