Polymerjs 数据系统数据系统|Polymerjs

本文概述

数据路径
Polymer.js中的路径段
数据流
链接两条路径
观察者
数据绑定

Polymer通过根据数据更改采取各种措施来帮助你更改元素的属性。这些动作是：
观察者：用于在数据更改时调用回调。
计算属性：用于根据其他属性计算虚拟属性。每当输入数据更改时, 它也会重新计算它们。
数据绑定：用于在数据更改时使用批注来更新DOM节点的属性, 属性或文本内容。
数据路径路径是数据系统中的字符串, 用于提供相对于范围的属性或子属性, 其中范围可以是宿主元素。
数据绑定是一种用于将路径链接到不同元素的技术。如果元素通过数据绑定连接, 则可以将数据从一个元素更改为另一个元素。
例子

< dom-module id = "my-name"> < template> . . .< address-card address="{{myAddress}}"> < /address-card> < /template> . . .< /dom-module>

【Polymerjs 数据系统】在上面的示例中, 你可以看到有两条路径(my-name和address-card)通过数据绑定连接, 其中< address-card> 在< my-name> 元素的本地DOM中。
Polymer.js中的路径段以下是Polymer.js中特殊类型的路径段的列表：

你可以将通配符(*)用作路径的最后一段。
通过将字符串拼接放置为路径中的最后一段, 可以显示给定阵列的阵列突变。
数组项路径指定数组中的项, 数字路径段指定数组索引。

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

路径段由点分隔。例如：” apple.grapes.orange” 。
在字符串数组中, 每个数组元素都是路径段或虚线路径。例如：[” apple” , ” grapes” , ” orange” ], [” apple.grapes” , ” orange” ]。

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

< !doctype html> < html> < head> < title> Polymer Example< /title> < script src = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/my-element.html"> < /head> < body> < my-element> < /my-element> < /body> < /html>

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

< link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer-element.html"> < link rel = "import" href = "http://www.srcmini.com/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>

输出

文章图片
单击按钮, 你可以看到值的更改：

文章图片
链接两条路径使用linkPaths()方法将两个路径链接到相同的对象。你需要使用数据绑定在元素之间生成更改。
例子

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

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

unlinkPaths('myTeam');

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

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

数据绑定数据绑定用于从其本地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

绑定的左侧指定目标属性或属性, 而绑定的右侧指定绑定注释或复合绑定。绑定注释中的文本用双大括号({{}})或双方括号([[]])分隔符括起来, 并且复合绑定包括一个或多个字符串文字绑定注释。
以下是用于数据绑定用例的辅助元素-
模板中继器：可以为数组中的每个项目创建模板内容的实例。
数组选择器：它提供结构化数据数组的选择状态。
条件模板：如果条件为true, 则可以标识内容。
自动绑定模板：它指定Polymerjs 元素外部的数据绑定。
如果辅助元素更新DOM树, 则DOM树会触发dom-change事件。有时, 你可以通过更改模型数据来与DOM交互, 而不是通过与创建的节点交互。因此, 你可以使用dom-change事件直接访问节点。