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

Question

虽然 migrating to Polymer 1.0 从 0.5 开始，我遇到了一件有趣的事情。认为它可能会帮助其他有类似问题的人。

我有一个正在使用 <template is="dom-repeat" items="{{customers}}">...</template> 的元素。我面临的问题是我必须将每个属性绑定放在 HTML 元素中。下面是我打算写的代码：

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

但它只显示 {{item.name}} 的值。原因是其他属性绑定 没有包含在单独的 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> 标签内。

然后我继续 将每个属性绑定都用自己的 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）的引入，只有将所有内容都包装到其自己的元素中时，文本节点内容的数据绑定才有效。

见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 开始，问题中描述的问题不再有问题/错误。复合绑定现在可用，请参阅 release notes on the Polymer blog。

Answer 2

请注意，对于元素属性，您可以使用诸如辅助函数之类的东西来进行字符串连接。这是一个例子。

<my-foo fullname="{{computeFullName(firstname, lastname)}}">
        Hi, my name is <span>{{firstname}}</span>.
</my-foo>


...

computeFullName: function(first, last) {
  return first + ' ' + last;
}

这里是 link：https://www.polymer-project.org/1.0/docs/migration.html#data-binding

编辑：对于节点内容，也可以使用 computed properties 进行字符串连接（我称它们为辅助函数）。这是一个例子，

<dom-module id="x-custom">
  <template>
    My name is <span>{{fullName}}</span>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'x-custom',

    properties: {

      first: String,

      last: String,

      fullName: {
        type: String,
        // when `first` or `last` changes `computeFullName` is called once
        // (asynchronously) and the value it returns is stored as `fullName`
        computed: 'computeFullName(first, last)'
      } 

    },

    computeFullName: function(first, last) {
      return first + ' ' + last;
    }

    ...

  });
</script>

Answer 3

您需要使用计算属性来组合值。在此页面上搜索它们 https://www.polymer-project.org/1.0/docs/devguide/properties.html

Answer 4

使用 Polymer 1.2，您的示例代码将真正起作用。绑定注释不再需要跨越整个标签。

示例：

<div>first name: [[name.first]] last name: [[name.last]]</div>

https://blog.polymer-project.org/releases/2015/11/02/release-1.2.0/

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

Polymer 1.0 - Issue with displaying values inside template is="dom-repeat"

javascript

polymer

polymer-1.0

编辑