Question

我有一个Polymer模板，可以创建paper-item的列表。我想用其他CSS类来装饰其中一些。到目前为止我所做的是使用条件模板和每个变体，我发现它非常难看（见下文）。

<template is="dom-bind">
    <iron-ajax url="https://example.com/data.json" last-response="{{data}}" auto></iron-ajax>   

    <div role="listbox">
        <template is="dom-repeat" items="[[data.talks]]" as="talk">
            <paper-item>
                <paper-item-body two-line>
                    <template is="dom-if" if="[[shouldHighlight(talk)]]">
                        <div class="highlight"> <!-- content --></div>
                    </template>
                    <template is="dom-if" if="[[!shouldHighlight(talk)]]">
                        <div><!-- content --></div>
                    </template>                     
                </paper-item-body>
            </paper-item>
        </template>
    </div>
</template>

有没有更好的方法使用Polymer有条件地添加CSS类？

Answer 1

您可以使用计算的函数/属性来执行此操作：

在模板中：

<div class$="{{_getClassForHighlight(talk)}}"> <!-- content --></div>

在聚合物内部：

_getClassForHighlight: function(talk) {
    if (this.shouldHighlight(talk)) {
        return "highlight";
    }
    return "";
}

使用Polymer有条件地将CSS类添加到元素中

1 个答案: