Marionette nested LayoutView - parsing model

Question

I have Marionette/Backbone appliaction which is working fine. I wanted to add extra layer in our views:

Before:

TabLayoutView -> CompositeView

After:

TabLayoutView -> SectionLayoutView -> CompositeView

But this is not working and I can't see where is the problem.

Here is the code:

Model of tab:

TabModel = Backbone.Model.extend({
  defaults: {
    headerModel: {label: '', left: '', right: ''}
  }
})

Template of tab:

<div class="headerSection"></div>

View of tab:

var TabLayoutView = Marionette.LayoutView.extend({
  template: _.template(TabTemplate),
  tagName: 'div',
  regions: {
    headerRegion: {selector: '.headerSection'}
  },
  onShow: function() {
    this.headerRegion.show(new SectionLayoutView({model: this.model.get('headerModel')}));
  }
});

Model of section:

SectionModel = Backbone.Model.extend({
  defaults: {
    label: '',
    left: '',
    right: ''
  }
});

Template of section:

<div class="section">
  <div class="leftSection"/>
  <div class="rightSection"/>
</div>

View of section:

SectionLayoutView = Marionette.LayoutView.extend({
  template: _.template(SectionTemplate),
  tagName: 'div',
  regions: {
    leftRegion: {selector: '.section .leftSection'},
    rightRegion: {selector: '.section .rightSection'}
  },
  onShow: function() {
    this.leftRegion.show(new CompositeView(this.model.get('left')));
    this.rightRegion.show(new CompositeView(this.model.get('right')));
  }
});

Error I get is :

Uncaught TypeError: Cannot read property 'apply' of undefined

in the method

serializeModel: function(model) {
  return model.toJSON.apply(model, _.rest(arguments));
}

which is triggered in this line:

this.headerRegion.show(new SectionLayoutView({model: this.model.get('headerModel')}));

Could you please give me any ideas of what is wrong? We have similar code in other places and it is working fine. It seems like there is a problem with parsing model to json, but I can't see why.

score 3 · Answer 1 · answered Jun 22 '15 at 16:20

Because are you passing a plain Object to the view...

this.headerRegion.show(new SectionLayoutView({
  model: this.model.get('headerModel') // NOT a Backbone.Model
});

Try this:

this.headerRegion.show(new SectionLayoutView({
  model: new Backbone.Model(this.model.get('headerModel'))
});

Marionette nested LayoutView - parsing model

1 Answers1