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

时间:2015-06-25 11:11:03

标签: html5 polymer

我正在构建一个带有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>

似乎模板只呈现&#34;正常&#34;像href这样的属性。我错过了什么吗?感谢。

1 个答案:

答案 0 :(得分:2)

要绑定到属性,请使用$ =而不是=。这导致致电:

element.setAttribute(attr, value);

相反:

element.property = value;

(source)

所以在你的情况下:

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