骨干视图继承

Question

我正在尝试为对象浏览器编写一个Backbone视图,该浏览器旨在在具有不同对象类型和略微不同操作的多个位置实现.我怎样才能实现一些好的代码重用.

我试过简单地在我的浏览器中扩展骨干视图,然后在我的实现中扩展浏览器,但是这给我留下了一些共享的属性.这是一种不希望的效果,因为每次浏览器创建时都会将数据附加到所有实现.

有人可以解决一个解决这个问题的方法,或者可能是另一种解决方案吗？

下面是一些代码示例,可以让您更好地了解它目前的情况:

    var BrowserView = Backbone.View;

    _.extend(BrowserView.prototype, Backbone.View.prototype, {
        className: 'browser',

        collections: [],

        events: {

        },

        _events:{

        },

            initialize: function () {
            this._initialize();
        },

        render: function () {
            this._render();
        },

        _initialize: function () {
            this.container = $( this.make('div', {class: 'container'} ) );

            this.$el.append(this.container);

            if ( this.options.collections ) {
                this.collections = [];

                _.each(this.options.collections, this.add, this);
            }

            _.extend(this.events, this._events);

            this.delegateEvents();
        },

        _render: function () {
            this.container.empty();

            _.each(this.collections, function (view) {
                this.container.append(view.el);

                view.render();
            }, this);
        }
    });

    BrowserView.extend = Backbone.View.extend;

    var ContactBrowserView = BrowserView.extend({

    });

与往常一样,我非常欢迎有关我提供的代码段的任何方面的反馈.

谢谢,Alex

编辑 我的问题是子类共享集合属性.这是我自己的解决方案的一个示例,它通过继承的方法初始化collections属性.jsfiddle.net/JhZXh/3

Answer 1

我想我已经找到了自己问题的答案.

我认为实现我正在寻找的正确方法是将属性的初始化移动到Backbone视图提供的初始化方法.这样它们就被初始化了

var BrowserView = Backbone.View.extend({
    initialize: function () {
        this.collections = [];
    }
});

var FileBrowserView = BrowserView.extend({
    initialize: function () {
        BrowserView.prototype.initialize.apply(this);

        this.collections.push({name: 'Example Collection' + Math.rand()});
    }
});


var FileBrowserInstance1 = new FileBrowserView;
console.log(FileBrowserInstance1.collections);

var FileBrowserInstance2 = new FileBrowserView;
console.log(FileBrowserInstance2.collections);

去这里找一个小提琴 http://jsfiddle.net/yssAT/2/

Answer 2

这个要点显示了一个更好的选择： https ://gist.github.com/2287018