我有一个带有儿童视图的木偶
CollectionView
:
const BreadcrumbListView = Marionette.CollectionView.extend({
...
childView: BreadcrumbView,
...
})
const BreadcrumbView = Marionette.View.extend({...})
我想为该集合视图中的最后一个子项设置
aria-current
HTML 属性。我怎样才能做到这一点?
我尝试在初始化 CollectionView 之前设置它,如下所示:
detailCollection = new Backbone.Collection(models);
detailCollection.last().set('aria-current', 'page');
var breadcrumbView = views.BreadcrumbListView({
collection: detailCollection,
});
我也尝试过在
onRender
中使用CollectionView
方法:
const BreadcrumbListView = Marionette.CollectionView.extend({
...
onRender: function () {
const lastChildView = this.children.last();
lastChildView.model.set('aria-current', 'page');
}
...
})
但是在这两种情况下,HTML 属性都不会显示。
弄清楚了这一点。
我可以在实例化
CollectionView
之前在集合上设置一个属性,如下所示:
detailCollection.last().set('ariaCurrentPage', true);
您可能还可以更改底层模型数据来实现此目的。
然后在设置子视图的属性时,我可以通过
options.models
: 检查该属性
const BreadcrumbView = Marionette.View.extend({
...
attributes: function () {
let attributes = {
...
};
if (this.options.model.get('ariaCurrentPage')) {
attributes['aria-current'] = 'page';
}
return attributes;
},
...
})