Backbone.js 子类化主干视图

Backbone.js 子类化主干视图,backbone.js,Backbone.js,我有几个视图,它们都有我想抽象为自定义主干.View类的公共代码。这样做有什么最佳实践吗 这样做是一种好的模式吗 // Base Grid view var GridView = Backbone.View.extend({ initialize : function(){ //common view init code .. //do the plug in overrides

我有几个视图,它们都有我想抽象为自定义主干.View类的公共代码。这样做有什么最佳实践吗

这样做是一种好的模式吗

 // Base Grid view
 var GridView = Backbone.View.extend({
     initialize : function(){
                 //common view init code .. 

                 //do the plug in overrides
                 if (options.addHandler)
                     this.addHandler = options.addHandler;
                 if (options.events)
                     //?? extend default events or override? 
                     this.events = $.extend(this.events, options.events);
                 }, 
     addHandler : function() { 
                //defaulthandler this code can be overridden
                });
});


// in another object create some views from the GridView base
....
var overrides = { events:"xxx yyy", el: ulElement addHandler: myAddFunction } 
var UserList = GridView.extend(overrides)
var userList = new UserList(users, options);
....

var coursesOverrides : {addHandler:  ...}
var coursesOptions:    {el: courseElement, ...}
var CourseList = GridView.extend(coursesOverrides)
var courseList= new CourseList (courses, coursesOptions)

// along the same lines  maybe there's an abstraction for toolbar views 
var ClassToolbarView = ToolbarBase.extend(toolOverrides)
var classtoolbar = new ClassToolbarView(actions, toolbaropts)

任何指向扩展视图以重构公共视图代码的好例子的指针都是值得赞赏的。

首先,我没有看到在
初始值设定项()中传递的选项,因此这是一个bug

其次,继承了
.extend()
方法:

var GridView = Backbone.View.extend({ ... })
var GridViewWithNewFunctionsAndEvents = GridView.extend({ ... })
您可以替换或扩展GridView的功能,并使用newFunctionsandEvents()调用
newGridViews()
,在您需要的新对象中获得额外的功能,就像扩展主干股票视图类一样

如果需要扩展初始值设定项,可以这样做来调用超类上的初始值设定项:

 var GridViewWithNewFunctionsAndEvents = GridView.extend({
    initializer: function(options) {
        GridView.prototype.initializer.call(this, options);
        /* Your stuff goes here */
    }
  });

抱歉,那里有一些伪代码..过早保存,所以我做了一些编辑。我得到了我认为用于处理覆盖的模式的要点。您需要为视图事件字符串做一些特殊的操作吗?是的。如果要添加到它们,则需要在初始值设定项中执行此操作:
.extend(this.events,{'event domobject':'handler',…})
否则,必须从父类复制整个事件列表
delegateEvents()
发生在
初始值设定项之后,因此在此之后不必执行任何操作。