srcmini本文概述
Polymer通过根据数据更改采取各种措施来帮助你更改元素的属性。这些动作是：
观察者：用于在数据更改时调用回调。
计算属性：用于根据其他属性计算虚拟属性。每当输入数据更改时, 它也会重新计算它们。
数据绑定：用于在数据更改时使用批注来更新DOM节点的属性, 属性或文本内容。
数据路径
路径是数据系统中的字符串, 用于提供相对于范围的属性或子属性, 其中范围可以是宿主元素。
数据绑定是一种用于将路径链接到不同元素的技术。如果元素通过数据绑定连接, 则可以将数据从一个元素更改为另一个元素。
例子
<dom-module id = "my-name">
<template>
. . .
<address-card address="{{myAddress}}"></address-card>
</template>
. . .
</dom-module>在上面的示例中, 你可以看到有两条路径(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 = "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>输出
单击按钮, 你可以看到值的更改：
链接两条路径
使用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-bindingor
attribute-name$=annotation-or-compound-binding绑定的左侧指定目标属性或属性, 而绑定的右侧指定绑定注释或复合绑定。绑定注释中的文本用双大括号({{}})或双方括号([[]])分隔符括起来, 并且复合绑定包括一个或多个字符串文字绑定注释。
以下是用于数据绑定用例的辅助元素-
模板中继器：可以为数组中的每个项目创建模板内容的实例。
数组选择器：它提供结构化数据数组的选择状态。
条件模板：如果条件为true, 则可以标识内容。
自动绑定模板：它指定Polymerjs 元素外部的数据绑定。
如果辅助元素更新DOM树, 则DOM树会触发dom-change事件。有时, 你可以通过更改模型数据来与DOM交互, 而不是通过与创建的节点交互。因此, 你可以使用dom-change事件直接访问节点。
评论前必须登录！
注册