Как в Backbone изменять модель в подвью?

Question

[psyhO_octopus]

Всем привет. Как правильно работать с моделью когда во вью есть подвьюхи. Вот что я имею ввиду:
У меня компонент, пускай это будет какой-то абстрактная голосовалка. Она состоит из счетчика и формы для комментария.

Вот условная картинка:


Я хочу вынести форму в отдельную вью.

var VoteForm = Backbone.View.extend({
});

var Vote = Backbone.View.extend({
    initialize: function () {
        this.form = new VoteForm();
    }
});

В модели голосовалки есть два поля count и comment

var VoteModel = Backbone.Model.extend({
    defaults: {
        count: 0,
        comment: ''
    }
});

Далее, я хочу, что бы при сабмите формы изменялась модель. Т.е. в comment попало то, что введено в форму.
Вопрос в том как мне взаимодействовать с моделью. У меня есть только два варианта.
Первый это передавать модель в подвью.

var VoteForm = Backbone.View.extend({
    events: {
        'submit': function () {
             this.model.save({comment: this.commentValue}) // this.commentValue - это то что введено в форму
        }
    }
});

var Vote = Backbone.View.extend({
    initialize: function () {
        this.form = new VoteForm({
           model: this.model
        });
    }
});

var vote = new Vote({
    model: new VoteModel
});

Второй это подписываться на события подвью и в колбэке изменять модель

var VoteForm = Backbone.View.extend({
    events: {
        'submit': function () {
             this.trigger('submit', {comment: this.commentValue}) // this.commentValue - это то что введено в форму
        }
    }
});

var Vote = Backbone.View.extend({
    initialize: function () {
        this.form = new VoteForm();
        this.form.on('submit', function (data) {
            this.model.save({
                 comment. data.comment
            })
        });
    }
});

var vote = new Vote({
    model: new VoteModel
});

Является ли хоть один из вариантов верным? Если да/нет то почему? И как бы сделали вы?

Answer 1

[aen]

Вообще лучше всего соблюдать правило "Одна модель - одна вьюха". В вашем случае, это первый вариант. Тогда старшая вьюха Vote будет играть роль лэйаута. При условии, что не стоит размазывать модель на две вьюхи.

Вообще есть приличное количество материалов по работе с вложенными вьюхами в backbone. В marionette.js для вашего случая есть даже готовые сущности: Region и LayoutView.

Comments

[psyhO_octopus]

Я не работал с marionette.js. Но думаю регион это нечто другое. Своего рода место где могут оказаться разные компоненты, в зависимости от страницы. А у меня просто компонент, который я сделан не одним большим, а разбил на более мелкие. Т.е. это могло быть одно вью Vote. А мог бы счетчик вынести в отдельную подвью VoteCounter. Поэтому я думаю что модель должна быть одна. Главное понять с ней управляться .)

[aen]

psyhO_octopus: у вас не такой большой компонент, постарайтесь избавиться от одной вьюхи.

[psyhO_octopus]

aen: ну это же просто пример =) На самом деле все сложнее. А мне нужен только принцип

[aen]

psyhO_octopus: давайте более сложный пример обсудим :)

Answer 2

[Владимир Родкин]

Могу ошибаться, но мне кажется, что выделять подвью стоит если вы его будете переиспользовать в другом месте. Поэтому я бы исходил из того, как удобнее будет его использовать в других местах.
Если использовать подвью в других местах, я бы использовал коллбэк, если только в одном вью, то модель передавал бы.
Интересно как вы решили в итоге.