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.

Drapery

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.

Stickler

Exactly what I needed to get an option into the spark template. – Athenaathenaeum

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

Roanna

To call this function inside the template I'd invoke it like this: something()? – Dotted

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.

Fibrinolysin

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)

Blackington