聚合物允许通过采取不同的动作来观察元素性质的变化，例如-
- Observers -每当数据改变时，它都会调用回调。
- 计算属性-它根据其他属性计算虚拟属性，并在输入数据更改时重新计算它们。
- 数据绑定-每当数据更改时，它都会使用批注更新DOM节点的属性，属性或文本内容。
数据路径
路径是数据系统中的字符串，提供相对于作用域的属性或子属性。范围可以是宿主元素。可以使用数据绑定将路径链接到不同的元素。如果将数据更改与数据绑定连接在一起，则可以将数据更改从一个元素移动到另一个元素。
例子
<dom-module id = "my-profile">
<template>
. . .
<address-card address="{{myAddress}}"></address-card>
</template>
. . .
</dom-module>如果<address-card>位于<my-profile>元素的本地DOM中，则可以通过数据绑定连接上述两个路径（my-profile和地址卡）。
以下是Polymer.js中路径段的特殊类型-
- 通配符(*)可用作路径中的最后一个段。
- 通过将字符串拼接放置为路径中的最后一个片段，可以将阵列突变显示在给定的阵列上。
- 数组项路径表示数组中的项，数字路径段指定数组索引。
在数据路径中，每个路径段都是一个属性名称，它们包括以下两种路径：
- 路径段由点分隔。例如：“ apple.grapes.orange”。
- 在字符串数组中，每个数组元素都是路径段或虚线路径。例如：[“ apple”，“ grapes”，“ orange”]，[“ apple.grapes”，“ orange”]。
数据流
例子
以下示例指定了数据流的双向绑定。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>现在，创建另一个名为my-element.html的文件，并包含以下代码。
<link rel = "import" href = "bower_components/polymer/polymer/element.html">
<link rel = "import" href = "prop-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "my-element">
<template>
<prop-element my-prop="{{demoProp}}"></prop-element>
<p>
Present value: <span>{{demoProp}}</span>
</p>
</template>
<script>
Polymer ({
is: "my-element", properties: {
demoProp: String
}
});
</script>
</dom-module>接下来，再创建一个名为prop-element.html的文件，并添加以下代码。
//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
<template>
<button on-click = "onClickFunc">Change value</button>
</template>
<script>
Polymer ({
is: "prop-element", properties: {
myProp: {
type: String,
notify: true,
readOnly: true,
value: 'This is initial value...'
}
},
onClickFunc: function(){
this._setMyProp('This is new value after clicking the button...');
}
});
</script>
</dom-module>输出
如前几章中所示运行该应用程序，然后导航至http://127.0.0.1:8081/。以下将是输出：
单击按钮后，它将更改值，如以下屏幕截图所示：
链接两条路径
您可以使用linkPaths方法将两个路径链接到同一对象，并且需要使用数据绑定在元素之间生成更改。
例子
linkPaths('myTeam', 'players.5');
可以使用unlinkPaths方法删除路径链接，如下所示：
unlinkPaths('myTeam');
Observers
元素数据发生的可观察到的变化调用了称为Observers的方法。以下是Observers的类型。
- 简单的Observers用于观察单个属性。
- 复杂的Observers用于观察多个属性或路径。
数据绑定
数据绑定可用于连接其本地DOM中宿主元素的元素属性或属性。可以通过将注释添加到DOM模板来创建数据绑定，如以下代码所示。
<dom-module id = "myhost-element">
<template>
<target-element target-property = "{{myhostProperty}}"></target-element>
</template>
</dom-module>本地DOM模板中的数据绑定剖析如下所示-
property-name=annotation-or-compound-binding
或者
attribute-name$=annotation-or-compound-binding
绑定的左侧指定目标属性或属性，而绑定的右侧指定绑定注释或复合绑定。绑定注释中的文本用双大括号（{{}}）或双方括号（[[]]）分隔符括起来，并且复合绑定包括一个或多个字符串文字绑定注释。
以下是辅助元素，用于数据绑定用例：
- 模板Repeater – 可以为数组中的每个项目创建模板内容的实例。
- 数组选择器 – 提供结构化数据数组的选择状态。
- 条件模板 – 如果条件为真，则可以标识内容。
- 自动绑定模板 – 它指定聚合物元素外部的数据绑定。
如果辅助元素更新DOM树，则DOM树会触发dom-change事件。有时，您可以通过更改模型数据来与DOM交互，而不是通过与创建的节点交互。因此，您可以使用dom-change事件直接访问节点。
作者：terry，如若转载，请注明出处：https://www.web176.com/polymer/2269.html
