Backbone View Inheritance - PullRequest
Новая
       11

Backbone View Inheritance

6 голосов
/ 23 февраля 2012

Я пытаюсь написать представление 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({

    });

Как всегда, я более чем приветствую обратную связь в отношении любого аспекта предоставленного мною фрагмента кода.

СпасибоВы, Алекс

РЕДАКТИРОВАТЬ Моя проблема заключается в том, что подклассы разделяют свойство коллекций.Вот пример моего собственного решения, которое инициализирует свойство collection через унаследованный метод.jsfiddle.net/JhZXh/3

Ответы [ 4 ]

11 голосов
/ 24 февраля 2012

Мне кажется, я нашел ответ на свою проблему.

Я считаю, что правильный путь для достижения того, что я ищу, - это перенести инициализацию свойств в метод инициализации, предоставляемый 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/

4 голосов
/ 23 февраля 2012

Трудно понять, что именно является вашей целью.

, но я вижу это так, если у вас есть объект просмотра 

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

и он расширяет основу. View... тогда у вас на самом деле есть новый объект вида со всем из backbone.view и дополнительные опции, которые вы задаете в качестве параметров.

если вы затем перейдете к созданию второго вида, который расширит ваш первый, он будетполучить все из первого представления, + его собственные дополнения 

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/

3 голосов
/ 23 февраля 2012

Наследование от 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) { /* ... */ },
})
2 голосов
/ 13 апреля 2012

Эта суть показывает лучшую альтернативу: https://gist.github.com/2287018

...