8

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?

machineghost
  • 33,529
  • 30
  • 159
  • 234
streetlight
  • 5,968
  • 13
  • 62
  • 101

2 Answers2

16

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>
Derick Bailey
  • 72,004
  • 22
  • 206
  • 219
  • 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? – streetlight Apr 02 '13 at 11:43
  • I fixed this issue by changing model2 to this.options.model2 ! Thanks again! – streetlight Apr 02 '13 at 11:55
  • is there a similar way to do this with CollectionView? Kind-of off topic from this post, but it could be helpful! (Thanks again!) – streetlight Apr 16 '13 at 17:47
  • 1
    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. – Derick Bailey Apr 16 '13 at 21:27
  • 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!) – streetlight Apr 17 '13 at 17:44
  • Nevermind -- I found a good solution from this post http://stackoverflow.com/questions/11273115/marionette-compositeview-how-to-pass-parameters-to-marionette-itemview. Thanks again for Marionette! – streetlight Apr 17 '13 at 17:47
  • 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. – Mateusz Godlewski Sep 22 '14 at 18:09
  • How do you handle something like this mode.fetch()? It means that you need to create to listeners for all models from option. – Stanislav Ostapenko Jan 27 '15 at 18:43
0

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

Community
  • 1
  • 1
Rayweb_on
  • 3,727
  • 20
  • 24