P
P
psyhO_octopus2015-01-13 17:09:39
JavaScript
psyhO_octopus, 2015-01-13 17:09:39

How to change model in subview in Backbone?

Hello. How to work with the model when there are subviews in the view. Here's what I mean:
I have a component, let it be some kind of abstract voting. It consists of a counter and a comment form.
Here is a conditional picture:
83df1468d0844a0fb2b3ad7f071c4bee.png
I want to put the form in a separate view.

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

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

The voting model has two fields count and comment
var VoteModel = Backbone.Model.extend({
    defaults: {
        count: 0,
        comment: ''
    }
});

Next, I want the model to change when the form is submitted. Those. what was entered into the form got into the comment.
The question is how do I interact with the model. I only have two options.
The first is to pass the model to the subview.
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
});

The second is to subscribe to subview events and change the model in the callback
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
});

Is any of the options correct? If yes/no why? And how would you do it?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
aen, 2015-01-13
@aen

In general, it is best to follow the rule "One model - one view". In your case, this is the first option. Then the older view Votewill play the role of a layout. Provided that you should not smear the model into two views.
In general, there is a decent amount of material on working with nested views in the backbone. Marionette.js even has ready-made entities for your case: Regionand LayoutView.

V
Vladimir Rodkin, 2015-03-16
@VovanR

I can be wrong, but it seems to me that it is worth highlighting the subview if you reuse it in another place. Therefore, I would proceed from how it would be more convenient to use it in other places.
If I use a subview in other places, I would use a callback, if only in one view, then the model would pass.
I wonder how you ended up deciding.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question