Backbone Marionette: templateHelpers and itemViewOptions

Question

I've a problem with Backbone Marionette and ItemView rendering. I need to pass a value from the Composite View to each of its Item View. The value is contained correctly in the options array of the Item View, however, I cannot access it from the templateHelpers method.

So I tried to set it as value of my View but when I render the array it returns an "undefined" value.

The Composite View

var TableView = Backbone.Marionette.CompositeView.extend({
....
    itemViewOptions: {
        foo: "bar",
    },

The Item View

var RowView = Backbone.Marionette.ItemView.extend({

template: RowTemplate,
tagName: "tr",
foo: "",

initialize: function(){

    this.foo = this.options.foo;              
},

templateHelpers: {  

     foo: function(){
         return this.foo;
     }

},

What I'm doing wrong? How can I access the value and fetch it to the template? Thank you.

Answer 1

In the templateHelpers functions, the this variable is the object that was retured from the serializeData method. To get the itemViewOptions in to the templateHelpers, then, you need to modify the serializeData method on your item view:

ItemView.extend({

  // ...

  serializeData: function(){
    // call the super method
    var data = Backbone.Marionette.ItemView.prototype.serializeData.apply(this, arguments);

    // augment the data the way you need
    data.foo = this.options.foo;

    // send back your custom data
    return data;
  }


});

This should make your data available in the templateHelpers.

Answer 2

More simple solution use construction templateHelpers: function(){return {}}, example:

var RowView = Backbone.Marionette.ItemView.extend({
    // ...
    templateHelpers: function(){  
        return {
            foo: this.foo
        }
    },
    // ...
})

and for using with data:

var RowView = Backbone.Marionette.ItemView.extend({
    // ...
    templateHelpers: function(){
        var foo = this.foo  // context is view
        return {
            something: function(){ 
                return this.name + " " + foo  // context is data object
            }
        }
    },
    // ...
})

Docs: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#object-or-function-as-templatehelpers

Answer 3

I think this is simpler

in your view

var RowView = Backbone.Marionette.ItemView.extend({
...
 initialize: function(options){
            this.options = options;
        },
        options: {},
  templateHelpers: function(){
        var foo = this.options.foo;
....

}

the benefit of this is if you have other things you want to pass values to they can just take it from options, for example in one of my views I have

 className: function(){ return this.options.size + "-widget"; }

for a collection of widgets.

Answer 4

When you are calling the super method as Derick suggested

var data = Backbone.Marionette.ItemView.prototype.serializeData.apply(this, arguments);

Be sure to call it on a proper class like CompositeView instead of ItemView, because since Marionette 2.2 SerializeData fn has been changed to pass on implementation logic to specific functions and not all of the are available in all classes

Or alternatively if you are using CoffeeScript, you can call data = super(arguments)