javascript - Marionette.js EmptyChildView

Question

这是我的 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;
});

这是我的使用方法:

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;
});

EmptyView 将成为多个 View 的共享组件。由于某种原因，我无法访问 templateHelpers 中的 this.link (它返回未定义)

Answer 1

templateHelpers 函数以 View 数据作为上下文 (this) 进行调用。您需要将 link 添加到序列化 View 数据:

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