骨干视图继承

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({

    });

编辑 我的问题是子类共享集合属性。这是我自己的解决方案的一个示例，它通过继承的方法初始化集合属性。 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

很难看出你的目标到底是什么。

但这就是我的看法 如果你有一个视图对象

var myView = Backbone.View.extend({
    foo: "bar"
});

你让它扩展了主干。视图...然后你实际上有一个新的视图对象，其中包含主干视图的所有内容，以及你作为参数提供的额外选项。

如果你接着创建第二个视图，它会扩展你的第一个视图 它会从你的第一视角得到一切，+它自己的附加功能

var mySecondView = myView.extend({
    foobar: "f00b@r"
});

如果您要创建第二个视图的实例并记录它的 foo 属性，它仍将保持 "bar" 作为值

var mySecondViewInstance = new mySecondView();
console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo);
console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar);

如果我创建第一个视图的新实例，并将 foo 更改为 "changed-foo" foo 在 mySecondViewInstance 上的日志仍然是 "bar"

var myViewInstance = new myView();
myViewInstance.foo = "changed-foo";
console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo);
console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar);

可以在这里找到一个 JS-Fiddle 来玩它： http://jsfiddle.net/saelfaer/uNBSW/

Answer 3

从Backbone.View 继承不起作用，或者非常复杂。

您应该创建一个通用对象，您的每个视图都将从该对象继承，即：

var ViewInterface = {
  events        : { /* ... */ },
  initialize    : function (options) { /* ... */ },
  otherFunction : function (options) { /* ... */ },
}

您的每个视图都将从该对象扩展：

var BrowserView = Backbone.View.extend(_.extend(ViewInterface, {
  anotherFunction : function (options) { /* ... */ },
})

var AnotherView = Backbone.View.extend(_.extend(ViewInterface, {
  yetAnotherFunction : function (options) { /* ... */ },
})

Answer 4

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