Question

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

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

＆＃13;

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

＆＃13;

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

我尝试了以下但是没有工作：

＆＃13;

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

＆＃13;

意思是，我将{{item.name}}放在<p>...</p>代码中，并将{{item.addr}}和{{item.addr2}}放在一个<span>...</span>代码中。

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

＆＃13;

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

＆＃13;

它有效!!

我真的不知道它是1.0的错误还是我做错了！如果有人知道答案，请帮助。

提前致谢

Answer 1

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

请参阅Polymer documentation：

绑定注释当前必须跨越标记的整个内容

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

文档中的示例：

<!-- 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;
}

以下是链接：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

使用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/

Answer 4

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

聚合物1.0 - 在模板内显示值的问题是=＆＃34; dom-repeat＆＃34;

4 个答案:

修改