聚合物1.0 - 在模板内显示值的问题是=“dom-repeat” [英] Polymer 1.0 - Issue with displaying values inside template is="dom-repeat"

问题描述

当从0.5迁移到Polymer 1.0 时，我遇到了有趣的事情。认为它可能会帮助其他人遇到类似的问题。

While migrating to Polymer 1.0 from 0.5 I have come across an interesting thing. Thought it might help others having similar problem.

我有一个元素我正在使用< template is =dom-repeatitems = {{客户}} > ...< /模板> 。我面临的问题是我必须将每个属性绑定放在HTML元素中。我想写的代码如下：

I have an element where I am using <template is="dom-repeat" items="{{customers}}">...</template>. The problem I am facing is I have to place every single property binding inside a HTML element. The code below what I intended to write:

<template is="dom-repeat" items="{{customers}}">
  <div>
    {{item.name}}<br />
    {{item.addr}}, {{item.addr2}}<br />
    {{item.phone}}
  </div>
</template>

但它只显示 {{item.name}} 的值。原因是其他属性绑定未包含在单独的HTML标记中，它们根本不显示！

But it is only displaying the value for {{item.name}}. The reason is other property bindings are not wrapped within separate HTML tags, they are not displaying at all!

我尝试了以下但没有'工作要么：

I tried the following but didn't work either:

<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> tag。

Means, I put {{item.name}} inside a <p>...</p> tag and placed {{item.addr}} and {{item.addr2}} inside a single <span>...</span> tag.

然后我继续将每个属性绑定由他们自己的HTML标签包装，如下所示：

Then I went on and put every single property binding wrapped by their own HTML tags like the following:

<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的错误还是我做错了！如果有人知道答案，请帮助。

I truly have no idea whether it is a bug of 1.0 or there is something I am doing wrong! If anybody knows the answer please help.

提前致谢

推荐答案

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

You're not doing anything wrong. With the introduction of Polymer 0.9 (and later 1.0) data-binding to the content of text nodes only works if you wrap everything into its own element.

参见聚合物文档：

绑定注释当前必须跨越整个内容tag

The binding annotation must currently span the entire content of the tag

所以你必须删除所有空格和其他字符才能正常工作。

So you have to remove all whitespace and other characters for it to work.

文档中的示例：

<!-- 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开始，问题中描述的问题不再是问题/错误。复合绑定现在有效，请参阅Polymer博客上的发布说明。

这篇关于聚合物1.0 - 在模板内显示值的问题是=“dom-repeat”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！