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)
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;
}
}
}
// ...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.