Polymer 数据系统

Polymer 通过基于数据更改采取各种操作，来方便您更改元素的属性。 这些操作是

观察者 (Observers): 它用于在数据更改时调用回调。

计算属性 (Computed Properties): 它用于基于其他属性计算虚拟属性。 并且在输入数据更改时重新计算它们。

数据绑定 (Data Bindings): 它用于在数据更改时，使用注解更新 DOM 节点的属性、特性或文本内容。

数据路径

路径是数据系统中的一个字符串，用于提供相对于作用域的属性或子属性，其中作用域可以是宿主元素。

数据绑定是一种用于将路径链接到不同元素的技术。 如果元素通过数据绑定连接，则可以从一个元素更改数据到另一个元素。

示例

在上面的示例中，您可以看到两个路径（my-name 和 address-card）与数据绑定连接，其中 <address-card> 位于 <my-name> 元素的本地 DOM 中。

Polymer.js 中的路径段

以下是 Polymer.js 中特殊类型的路径段列表

• 您可以使用通配符 (*) 字符作为路径中的最后一个段。
• 您可以通过将字符串拼接作为路径中的最后一个段，来显示给定数组的数组突变。
• 数组项路径指定数组中的一个项目，数字路径段指定数组索引。

在数据路径中，路径段是属性名称，它包括两种类型的路径

• 路径段用点分隔。 例如：“apple.grapes.orange”。
• 在字符串数组中，每个数组元素要么是路径段，要么是点状路径。 例如：["apple","grapes","orange"], ["apple.grapes","orange"]。

数据流

让我们举一个例子来看看数据流的双向绑定。 创建一个名为 index.html 的文件，并在其中使用以下代码。

创建另一个名为 my-element.html 的文件，并使用以下代码。

现在，再创建一个名为 prop-element.html 的文件，并使用以下代码

输出

单击按钮，您可以看到值的变化

链接两个路径

使用 linkPaths() 方法将两个路径链接到相同的对象。您需要使用数据绑定来生成元素之间的更改。

示例

可以使用 unlinkPaths 方法删除路径链接，如下所示

观察器

观察者是元素数据发生更改时调用的方法。 以下是观察者的类型。

• 简单观察者用于观察单个属性。
• 复杂观察者用于观察多个属性或路径。

数据绑定

数据绑定用于将宿主元素中的元素的属性或特性连接到其本地 DOM。

可以通过将注解添加到 DOM 模板来创建数据绑定，如下所示

本地 DOM 模板中数据绑定的剖析

或

绑定的左侧指定目标属性或特性，而绑定的右侧指定绑定注解或复合绑定。 绑定注解中的文本用双花括号 ({{ }}) 或双中括号 ([[ ]]) 分隔符括起来，复合绑定包括一个或多个字符串文字绑定注解。

以下是与数据绑定用例一起使用的辅助元素 -

模板重复器 (Template Repeater): 可以为数组中的每个项目创建一个模板内容的实例。

数组选择器 (Array Selector): 它为结构化数据的数组提供选择状态。

条件模板 (Conditional Template): 如果条件为真，您可以识别内容。

自动绑定模板 (Auto-binding Template): 它指定 polymer 元素之外的数据绑定。

如果辅助元素更新 DOM 树，则 DOM 树会触发 dom-change 事件。 有时，您可以通过更改模型数据来与 DOM 交互，而不是通过与创建的节点交互。 因此，您可以使用 dom-change 事件直接访问节点。