📅  最后修改于: 2020-10-23 03:42:25             🧑  作者: Mango
聚合物可以通过采取不同的动作来观察元素性质的变化,例如-
路径是数据系统中的字符串,提供相对于作用域的属性或子属性。范围可以是宿主元素。可以使用数据绑定将路径链接到不同的元素。如果将数据更改与数据绑定连接在一起,则可以将数据更改从一个元素移动到另一个元素。
. . .
. . .
如果
以下是Polymer.js中路径段的特殊类型-
在数据路径中,每个路径段都是一个属性名称,它们包括以下两种路径:
以下示例指定了数据流的双向绑定。创建一个index.html文件,并在其中添加以下代码。
Polymer Example
现在,创建另一个名为my-element.html的文件,并包含以下代码。
//it specifies the start of an element's local DOM
Present value: {{demoProp}}
接下来,再创建一个名为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中宿主元素的元素属性或属性。可以通过将注释添加到DOM模板来创建数据绑定,如以下代码所示。
本地DOM模板中的数据绑定剖析如下所示-
property-name=annotation-or-compound-binding
要么
attribute-name$=annotation-or-compound-binding
绑定的左侧指定目标属性或属性,而绑定的右侧指定绑定注释或复合绑定。绑定注释中的文本用双大括号({{}})或双方括号([[]])分隔符括起来,并且复合绑定包括一个或多个字符串字面量绑定注释。
以下是用于数据绑定用例的辅助元素-
如果辅助元素更新DOM树,则DOM树会触发dom-change事件。有时,您可以通过更改模型数据而不是与创建的节点进行交互来与DOM交互。因此,您可以使用dom-change事件直接访问节点。