Question

我试图了解Polymer如何在自定义元素的模板中呈现属性。我看到一些我无法解释的行为，其中一些属性在一个案例中呈现（当被标签包围时），而在另一个案例中则没有（当标签不在模板中时）。为了证明我写这篇Plunker的行为：

基本上我所做的是我写了以下自定义元素：

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="characters-label">
  <style>
  </style>
  <template>
    This has {{ncharacters}} characters!
  </template>
</dom-module>
<script>
  Polymer({
    is: "characters-label",
    properties: {
      ncharacters: {
        type: String,
        value: '6'
      }
    }
  });
</script>

我在index.html文件中使用它：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
    <script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
    <link rel="import" href="characters-label.html" />
  </head>

  <body>
    <p>This is before my label</p>
    <div>
      <characters-label></characters-label>
    </div>
    <p>This is after my label</p>
  </body>

</html>

结果不会在HTML中呈现值'6'，而是获取模板的文字内容：

这是在我的标签之前这有{{ncharacters}}个字符！
这是在我的标签

之后

但是，如果我将自定义元素的模板更改为：

<template>
  This has <b>{{ncharacters}}</b> characters!
</template>

然后结果如预期：

这是在我的标签之前这有 6 字符！
这是在我的标签

之后

这是正常行为吗？

Answer 1

是的，这是按预期工作的。请参阅https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content。

要绑定到子元素的textContent，您只需在子元素中包含注释即可。绑定注释当前必须跨越标记的整个内容：

...

标记内不支持字符串连接，并且标记不能包含任何空格：

为什么聚合物属性绑定在我的模板中需要标记？

1 个答案: