3

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

我有一个我正在使用的元素<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 的错误还是我做错了什么！如果有人知道答案，请帮忙。

提前致谢

4

4 回答 4

7

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

请参阅聚合物文档：

绑定注释当前必须跨越标签的全部内容

因此，您必须删除所有空格和其他字符才能使其正常工作。

文档中的示例：

<!-- 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 博客上的发行说明。

于 2015-06-02T15:32:29.443 回答
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

编辑：对于节点内容，字符串连接也可以使用计算属性完成（我称它们为辅助函数）。这是一个例子，

<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>
于 2015-06-02T16:19:35.673 回答
2

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

于 2016-01-13T14:52:40.393 回答
1

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

于 2015-06-03T15:25:20.703 回答