CODEWITHSUNDEEP
backbone.jsmarionette
Ingro
Ingro

Reputation: 2841

Backbone Marionette: templateHelpers and itemViewOptions

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.

Upvotes: 11

Views: 11891

Answers (4)

Dejan Cancarevic
Dejan Cancarevic

Reputation: 197

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)

Upvotes: 0

user254694
user254694

Reputation: 1612

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.

Upvotes: 1

evgeniy.klemin
evgeniy.klemin

Reputation: 188

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

Upvotes: 12

Derick Bailey
Derick Bailey

Reputation: 72868

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.

Upvotes: 29

Related Questions