使用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中扩展视图

回答

相关问题