在HTML5中使用自定義data- *屬性 <template> 標簽

Question

我正在建立一個帶有dom-repeat模板的菜單，如下所示：

        <template is="dom-repeat" items="{{appletsMenu}}">
              <a data-route="{{item.dataRoute}}" href="{{item.href}}">
                <iron-icon icon="{{item.icon}}" src="{{item.iconSrc}}" ></iron-icon>
                <span>{{item.name}}</span>
              </a>
        </template>

雖然在生成的DOM中未填充data-route屬性：

<a href="...">...</a>
<a href="...">...</a>

似乎該模板僅呈現“普通”屬性，例如href 。 我在想什么嗎？ 謝謝。

Answer 1

要綁定到屬性，請使用$ =而不是=。 這導致調用：

element.setAttribute(attr, value);

相對於：

element.property = value;

（資源）

因此，在您的情況下：

<a data-route$="{{item.dataRoute}}" href="{{item.href}}">