在 HTML5 <template> 标签内使用自定义 data-* 属性

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>

似乎模板只呈现 "normal" 个属性，如 href。我错过了什么吗？谢谢。

Answer 1

要绑定到属性，请使用 $= 而不是 =。这导致调用：

element.setAttribute(attr, value);

相对于：

element.property = value;

(source)

所以在你的情况下：

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

在 HTML5 <template> 标签内使用自定义 data-* 属性

Using custom data-* attributes inside HTML5 <template> tag

html

polymer