在聚合物中动态创建html标签

Question

我有一个项目列表，我需要动态创建带有类和文本的标签，这取决于项目类型。目前我正在以下列方式进行：

<template is="dom-repeat" items="{{list}}" as="item">
  <span class$="[[_customClass(item)]]">
    [[_customText(item)]]
  </span>
</template>

这需要定义两个函数，它们基本上具有相同的switch语句但返回不同的值。是否有更优雅的方法来创建只有一个函数调用的跨度？

Answer 1

  <template is="dom-repeat" items="[[list]]">
    <span class$="[[item]]">
      [[_customText(item)]]
    </span>
  </template>

项默认为item，因此您不需要 as =“item”

假设数组是一个字符串，您只需为每个字符串值创建css类。如果该项目是对象，只需转到[[item.type]]和[[item.text]]。

  <template is="dom-repeat" items="[[list]]">
    <span class$="[[item.type]]">
      [[item.text]]
    </span>
  </template>

当填充items数组时，我会将其散列到包含对象的数组中，并将 .type 和 .text 设置为属性，并使用我上面写的内容。然后你只需要遍历数组一次。