為什么聚合物屬性綁定在模板中需要標簽？

Question

我試圖了解Polymer如何在自定義元素的模板中呈現屬性。 我看到了一些我無法解釋的行為，其中某些屬性在一種情況下（被標簽包圍時）呈現，而在另一種情況下（當模板中不存在標簽時）呈現。 為了演示該行為，我編寫了以下代碼：

http://plnkr.co/WHYZKrjMMTMckw4X6p4Q

基本上，我所做的是編寫了以下自定義元素：

<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 個解決方案

解決方案1
0 已采納 2015-06-16 18:42:06

為什么聚合物屬性綁定在模板中需要標簽？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-06-16 18:42:06

解決方案1
0 已采納 2015-06-16 18:42:06