如何在 Marionette CollectionView 的最后一个子视图上设置属性？

Question

我有一个带有儿童视图的木偶

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 属性都不会显示。

Answer 1

弄清楚了这一点。

我可以在实例化

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