同时 migrating to Polymer 1.0从 0.5 开始,我遇到了一件有趣的事情。认为它可能会帮助其他有类似问题的人。
我有一个元素,我正在使用 <template is="dom-repeat" items="{{customers}}">...</template>
.我面临的问题是我必须将每个属性绑定(bind)放在 HTML 元素中。下面是我打算写的代码:
<template is="dom-repeat" items="{{customers}}">
<div>
{{item.name}}<br />
{{item.addr}}, {{item.addr2}}<br />
{{item.phone}}
</div>
</template>
但它只显示 {{item.name}}
的值.原因是其他属性绑定(bind)没有包装在单独的 HTML 标记中,它们根本不显示!
我尝试了以下但也没有用:
<template is="dom-repeat" items="{{customers}}">
<div>
<p>{{item.name}}</p>
<span>{{item.addr}} {{item.addr2}}</span>
</div>
</template>
意思是,我把{{item.name}}
在 <p>...</p>
里面标记并放置 {{item.addr}}
和 {{item.addr2}}
内单<span>...</span>
标签。
然后我继续将每个属性绑定(bind)放置在它们自己的 HTML 标记中,如下所示:
<template is="dom-repeat" items="{{customers}}">
<div>
<p>{{item.name}}</p>
<span style="display:block">{{item.addr}}, <span>{{item.addr2}}</span></span>
<span style="display:block;">{{item.phone}}</span>
</div>
</template>
它有效!!
真不知道是1.0的bug还是我哪里做错了!如果有人知道答案,请帮忙。
提前致谢
最佳答案
你没有做错任何事。随着 Polymer 0.9(以及更高版本的 1.0)的引入,只有当您将所有内容都包装到它自己的元素中时,文本节点内容的数据绑定(bind)才有效。
The binding annotation must currently span the entire content of the tag
因此您必须删除所有空格和其他字符才能使其正常工作。
文档中的示例:
<!-- this works -->
<template>
First: <span>{{first}}</span><br>
Last: <span>{{last}}</span>
</template>
<!-- Not currently supported! -->
<div>First: {{first}}</div>
<div>Last: {{last}}</div>
<!-- Not currently supported! -->
<div>
{{title}}
</div>
编辑
从 Polymer 1.2 开始,问题中描述的问题不再有问题/错误。复合绑定(bind)现在有效,请参阅 release notes on the Polymer blog .
关于javascript - Polymer 1.0 - 在模板内显示值的问题是 ="dom-repeat",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30600115/