Question

我正在学习Polymer 1.0数据绑定，但我很难理解开发者指南中的第一个例子：

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html

以下是摘录：

数据绑定将自定义元素（主机元素）的属性或子属性绑定到其本地DOM（子元素或目标元素）中元素的属性或属性。

使用主机元素的本地DOM模板中的绑定注释创建绑定：

<dom-module id="host-element">
    <template>
      <child-element name="{{myName}}"></child-element>  
    </template>
</dom-module>

我是否正确地说，在这个例子中，host-element将有一个名为myName的属性，它将绑定（双向）到child-element的“name”属性？ child-element应该是另一个自定义元素？我不清楚什么应该绑定到什么以及如何使用它。

我最初的数据绑定概念是将数据从自定义元素外部（即使用自定义元素标记的位置）绑定到内部，反之亦然。然而，这个例子似乎纯粹是内部关注的，所以也许我误解了。

编辑：

为了进一步混淆问题，同一篇文章中的后续示例使用本地DOM之外的绑定语法（即使用custom_element的地方），与前一个示例中的解释相反。

<script>
  Polymer({
    is: 'custom-element',
    properties: {
      prop: {
        type: String,
        notify: true
      }
    }
  });
</script>
...

<!-- changes to "value" propagate downward to "prop" on child -->
<!-- changes to "prop" propagate upward to "value" on host  -->
<custom-element prop="{{value}}"></custom-element>

Answer 1

是的，host-element将有一个名为myName的属性，该属性绑定到name的{{1}}属性。有问题的子元素可以是本机html元素，也可以是其他自定义元素。

child-element属性可以像这样设置：

myName

并且，像这样投入使用：

Polymer({
is: 'host-element',
properties: {
  myName: {
    type: String
  }
}
});

然后，要从元素内的其他位置访问<host-element my-name="Frank"></host-element>属性，可以使用myName语法。使用最后一个示例作为起点，它可能如下所示：

this.myName

Polymer数据绑定页面上的大多数示例都引用了元素内部的绑定，是的。 Properties用于从Polymer元素外部获取数据。 Polymer({ is: 'host-element', properties: { myName: { type: String } }, sayMyName: function(){ return "My name is" + this.myName; } });就是一个很好的例子。

显示本地DOM之外的数据绑定的示例可能有点令人困惑。我认为他们只是展示了绑定数据的不同方法，而没有引用元素的范围。

目前，有两种方法可以在本地DOM之外使用数据绑定（myName和{{}}）。将其放置在另一个自定义聚合物元素中，或使用自动绑定模板。自动绑定模板是一种在不创建新元素的情况下使用Polymer绑定的方法。在您的应用程序的索引页面上非常有用，尤其如此。

Click here to read about auto-binding templates

Polymer 1.0

1 个答案: