Polymer 1.0 中的数据绑定

Question

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

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

摘录如下：

数据绑定将自定义元素（宿主元素）的属性或子属性绑定到其本地 [=33= 中的元素的属性或属性]（子元素或目标元素）。

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

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

我说的对吗，在这个例子中，主机元素将有一个名为 myName 的属性并且它将绑定（2 向）到 "name" 属性子元素？子元素应该是另一个自定义元素吗？我不清楚什么应该绑定到什么以及如何使用它。

我最初对数据绑定的预想是将数据从自定义元素外部（即使用自定义元素标签的地方）绑定到内部，反之亦然。然而，这个例子似乎纯粹是内部关注的，所以我可能误解了。

编辑：

为了进一步混淆问题，同一篇文章中后面的示例使用了本地 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 的属性，它绑定到 child-element 的 name 属性。有问题的子元素可以是原生 html 元素，也可以是另一个自定义元素。

myName 属性可以这样设置：

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

并且，这样使用：

<host-element my-name="Frank"></host-element>

然后，要从元素内的其他地方访问 myName 属性，您可以使用 this.myName 语法。使用最后一个示例作为起点，它可能看起来像这样：

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

sayMyName: function(){
    return "My name is" + this.myName;
}
});

Polymer 数据绑定页面上的大多数示例都引用了元素内部的绑定，是的。 Properties 用于从 Polymer 元素外部获取数据。 myName 就是一个很好的例子。

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

目前有两种方法可以在本地 DOM 之外使用数据绑定（{{}} 和 [[]]）。要么将它放在另一个自定义聚合物元素中，要么使用自动绑定模板。自动绑定模板是一种无需创建新元素即可使用 Polymer 绑定的方法。在您的应用程序的索引页上非常有用，尤其是。

Click here to read about auto-binding templates

Polymer 1.0 中的数据绑定

Data binding in Polymer 1.0

polymer

polymer-1.0