javascript - Polymer 1.0 - 在模板内显示值的问题是 ="dom-repeat"

Question

同时 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还是我哪里做错了!如果有人知道答案，请帮忙。

提前致谢

Answer 1

你没有做错任何事。随着 Polymer 0.9(以及更高版本的 1.0)的引入，只有当您将所有内容都包装到它自己的元素中时，文本节点内容的数据绑定(bind)才有效。

参见 Polymer documentation :

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 .