Template two models in one view - Backbone/Marionette

Question

I'm trying to use two models in one view, and template using both of them. I'm working with Marionette. Here is me initialization of the view:

main_app_layout.header.show(new APP.Views.HeaderView({
 model: oneModel,
 model2 : twoModel}
));

Here is my view:

APP.Views.HeaderView = Backbone.Marionette.ItemView.extend({

    template : '#view_template',

    className: 'container',


    initialize: function() {
               //This correctly logs the second model
                console.log(this.options.model2);

    }

});

And here is the template:

 <script id="view_template" type="text/template">
        <p>{{twoModel_label}} {{oneModel_data}}</p>
        <p>{{twoModel_label2}} {{oneModel_data2}}</p>
    </script>

It renders everything correctly using the oneModel data, but doesn't render the second, even though it logs it correctly. I'm using Mustache as my templating language.

Can anyone help?

Sickly

Answer 1

You can override the serializeData method on your view and have it return both models' data:

APP.Views.HeaderView = Backbone.Marionette.ItemView.extend({

  // ...

  serializeData: function(){
    return {
      model1: this.model.toJSON(),
      model2: this.options.model2.toJSON()
    };
  }

});

Then your template would look like this:

<script id="view_template" type="text/template">
    <p>{{model1.label}} {{model1.data}}</p>
    <p>{{model2.label}} {{model2.data}}</p>
</script>

Metencephalon

This is great -- thanks for answering Derick! (I love Marionette, by the way!). However, I keep getting the error that model2 is undefined (specifically, Cannot call method 'toJSON' of undefined ) -- is there a specific way to pass the second model in that's different from my original way? – Sickly

I fixed this issue by changing model2 to this.options.model2 ! Thanks again! – Sickly

is there a similar way to do this with CollectionView? Kind-of off topic from this post, but it could be helpful! (Thanks again!) – Sickly

CollectionView doesn't render a template, so there's no data serialization done. CompositeView renders a template around a collection, though, and the solution would be the same. – Metencephalon

Ah okay, that makes sense! I think I may have not be clear with my question (or this may be a separate one), but how can I pass an option like 'model2' into a CollectionView, and have it used in each of the views that get made? Does it have to be a CompositeView to do this, or is this another process? (Thanks once again for your help - the more I learn about Marionette the more I like it!) – Sickly

Nevermind -- I found a good solution from this post #11273615. Thanks again for Marionette! – Sickly

I think passing two models in to one view, is not good solution. Instead you should create layout view and pass in it two item.views with its own model. I think this approach have few advantages. Most important is that you will not lose built in bindings model and view. – Gestation

How do you handle something like this mode.fetch()? It means that you need to create to listeners for all models from option. – Epicenter

Answer 2

try creating a complex model that contains the two models, this new model will have the other two as properties and you can acccess the properties of each one like this answer explains..

Access Nested Backbone Model Attributes from Mustache Template

Bedevil