CODEWITHSUNDEEP
javascriptbackbone.jsmarionette
dennismonsewicz
dennismonsewicz

Reputation: 25542

Marionette.js EmptyChildView

Here is my EmptyChildView:

define(['marionette', 'underscore',
'text!components/empty-options-view/template.html', 'config'],
function(Marionette, _, templateHTML, Config) {
    'use strict';

    var EmptyOptionsView = Marionette.ItemView.extend({
        template: _.template(templateHTML),
        className: 'empty-options',

        initialize: function(options) {
            this.link = options.url;
        },

        templateHelpers: function() {
            return {
                externalLink: function() {
                    return Config.get('base_url') + this.link;
                }
            };
        }
    });

    return EmptyOptionsView;
});

Here is how I am using it:

define(['marionette', 'groups-menu/groups/item-view', 'components/empty-options-view/view',
'eventer'],
function (Marionette, GroupItemView, EmptyOptionsView) {
    'use strict';

    var GroupsCollectionView = Marionette.CollectionView.extend({
        childView: GroupItemView,
        emptyView: EmptyOptionsView,

        emptyViewOptions: {
            url: '/settings'
        },
        /**
         * Toggles the "all" radio button on, unchecks all individual signup
         * checkboxes.
         * @method GroupsCollectionView.markAll
         */
        markAll: function () {
            this.collection.uncheckAll();
        }
    });

    return GroupsCollectionView;
});

The EmptyView is going to be a shared component for multiple views. For some reason I can't access the this.link in my templateHelpers (it returns undefined)

Upvotes: 1

Views: 62

Answers (1)

joews
joews

Reputation: 30330

templateHelpers functions are called with the view data as context (this). You need to add link to the serialized view data:

var EmptyOptionsView = Marionette.ItemView.extend({
  // ...

  serializeData: function() {
    return _.extend(this.model.toJSON(), {
      link: this.link;
    }
  },

  templateHelpers: function() {
    return {
      externalLink: function() {
        return Config.get('base_url') + this.link;
      }
    }
}

// ...

}

Marionette Docs - Accessing data within view helpers

Upvotes: 1

Related Questions