polymer - Polymer 1.0 中的数据绑定(bind)

Question

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

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

以下是摘录:

数据绑定(bind)将自定义元素(宿主元素)的属性或子属性绑定(bind)到其本地 DOM 中元素(子元素或目标元素)的属性或属性。

使用宿主元素的本地 DOM 模板中的绑定(bind)注释创建绑定(bind):

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

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

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

编辑:

为了进一步混淆问题，同一篇文章中的后面一个示例使用本地 DOM 之外的绑定(bind)语法(即使用 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 的属性绑定(bind)到 name child-element 的属性。相关子元素可以是原生 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 数据绑定(bind)页面上的大多数示例都引用元素内的绑定(bind)，是的。 Properties用于从 Polymer 元素外部获取数据。 myName就是一个很好的例子。

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

目前有两种方法可以在本地 DOM 之外使用数据绑定(bind)( {{}} 和 [[]] )。将其放置在另一个自定义 polymer 元素中，或使用自动绑定(bind)模板。自动绑定(bind)模板是一种使用 Polymer 绑定(bind)而无需创建新元素的方法。在应用程序的索引页上非常有用，尤其是。

Click here to read about auto-binding templates