Polymer- 数据系统

Polymer允许通过采取不同的操作来观察元素属性的变化，例如 :

• 观察者 : 它会在数据发生变化时调用回调函数.

• 计算属性 : 它根据其他属性计算虚拟属性，并在输入数据发生变化时重新计算它们.

• 数据绑定 : 每当数据发生变化时，它都会使用注释更新DOM节点的属性，属性或文本内容.

数据路径

路径是数据系统中的一个字符串，它提供相对于范围的属性或子属性.范围可以是主机元素.可以使用数据绑定将路径链接到不同的元素.如果元素与数据绑定连接，则数据更改可以从一个元素移动到另一个元素.

示例

      . . .

上述两条路径(my-profile和地址卡)可以与数据绑定连接，如果< address-card>位于< my-profile>的本地DOM中元素.

以下是Polymer.js : 中特殊类型的路径段;

• 外卡(*)字符可用作路径中的最后一个段.

• 数组突变可以显示给给定的数组将字符串拼接作为路径中的最后一个段.

• 数组项路径表示数组中的项，数字路径段指定数组索引.

在数据路径中，每个路径段都是一个属性名称，它们包含以下两种路径 :

• 由点分隔的路径段.例如:"apple.grapes.orange".

• 在字符串数组中，每个数组元素都是路径段或虚线路径.例如:["apple"，"grape"，"orange"]，["apple.grapes"，"orange"].

数据流

示例

以下示例指定数据流的双向绑定.创建一个index.html文件并在其中添加以下代码.

现在创建另一个名为my-element.html的文件并包含以下代码.

//it specifies the start of an element's local DOM         

接下来，再创建一个名为prop-element.html的文件并添加以下代码.

//it specifies the start of an element's local DOM         

输出

运行应用程序，如前几章所示，然后导航到 http://127.0.0.1:8081/的.以下是输出.

点击后按钮，它将更改值，如下面的屏幕截图所示.

链接两个路径

您可以使用linkPaths方法将两个路径链接到同一个对象，并且需要使用数据绑定来生成元素之间的更改.

示例

  linkPaths('myTeam'，'players.5');

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

  unlinkPaths('myTeam');

观察者

元素数据调用方法发生的可观察变化称为观察者.以下是观察者的类型.

• 简单的观察者用于观察单个属性.

• 复杂观察者用于观察多个属性或路径.

数据绑定

数据绑定可用于连接属性或元素的属性来自其本地DOM中的host元素.可以通过向DOM模板添加注释来创建数据绑定，如以下代码所示.

本地DOM模板中数据绑定的解剖结构如下所示;

  property-name = annotation-or-compound-binding

或

  attribute-name $ = annotation-or-compound-binding

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

以下是辅助元素，用于数据绑定用例 :

• 模板转发器 : 可以为数组中的每个项创建模板内容的实例.

• 数组选择器 : 它为结构化数据数组提供选择状态.

• 条件模板 : 如果条件为真，您可以识别内容.

• 自动绑定模板 : 它指定聚合物元素外部的数据绑定.

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