Polymer 1.0 中的数据绑定答案

【问题标题】：Data binding in Polymer 1.0Polymer 1.0 中的数据绑定
【发布时间】：2015-06-28 14:01:04
【问题描述】：

我正在学习 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 的属性，并且它会绑定（2-way）到 child-element 的“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>

【问题讨论】：

标签： polymer polymer-1.0

【解决方案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

【讨论】：

感谢您的帮助