Backbone Marionette：我可以为collectionView的emptyView提供选项吗？

Question

The scenario is this: I have a collectionView that gets used in a couple of places. I pass a few options into the view to change certain display aspects (verbiage mostly), since the behavior is exactly the same everywhere.

I'd really like to extend this customization to the emptyView , but I can't find a way to do so. There seems to be no reference to the collectionView on the emptyView , and neither can I seem to access the emptyView from the collectionView , outside of defining it.

Basically, I'd like to be able to do something like this:

var noItemsView = Backbone.Marionette.ItemView.extend({
    tagName: "li",
    className: "no-results",
    template: Handlebars.compile(noResultsTemplate),
}),

leftToggleListView = Backbone.Marionette.CollectionView.extend({
    tagName: "ul",
    className: "left-toggle-view-list",
    emptyView: noItemsView,

    initialize: function() {
        this.emptyView.model.set("name": "some custom name");
    }
});

And then have the noItemsView be able to render {{ name }} within its template.

Is there any way to accomplish this, short of modifying Marionette?

Answer 1

In the collectionView you can use the buildItemView, this function will be called also at the time to build the emptyView

I did a little demo in jsFiddle http://jsfiddle.net/rayweb_on/TN34P/

var leftToggleListView = Backbone.Marionette.CollectionView.extend({
tagName: "ul",
className: "left-toggle-view-list",
emptyView: noItemsView,
ValuethatMakesSense : "I do!",
buildItemView: function(item, ItemViewType, itemViewOptions){
   var options = _.extend({model: item}, itemViewOptions);
   var name = this.ValuethatMakesSense;
   var view = new ItemViewType({name : name});
   return view;
}
});

And in the initialize function of your item view you can read the options passed.

var noItemsView = Backbone.Marionette.ItemView.extend({
initialize : function (options) {
  var name = this.options.name;
  console.log(name);
},

tagName: "li",
className: "no-results",
template: "#noresults"
});

Im using a property inside the collectionView and then reading it/passing it to the empty view in the buildItemView just to test the functionality of the buildItemView function, you can do the proper logic checks and validations there.

Answer 2

It was a while since this question was asked, but it might be helpful to anybody looking:

Marionette CollectionView have an emptyViewOptions property now that works exactly like itemViewOptions but for emptyView:

http://marionettejs.com/docs/v2.4.2/marionette.collectionview.html#collectionviews-emptyviewoptions

Answer 3

Actually you can access to the emptyView in this way:

this.children._views[_.keys(this.children._views)[0]];

Seems like in the new version we will have a method that allows to get an emptyView . https://github.com/marionettejs/backbone.marionette/pull/727