Polymer - Hệ thống dữ liệu
Polymer cho phép quan sát những thay đổi trên thuộc tính của một phần tử bằng cách thực hiện các hành động khác nhau như -
Observers - Nó gọi các lệnh gọi lại bất cứ khi nào dữ liệu thay đổi.
Computed Properties - Nó tính toán các thuộc tính ảo dựa trên các thuộc tính khác và tính toán lại chúng bất cứ khi nào dữ liệu đầu vào thay đổi.
Data Bindings - Nó cập nhật các thuộc tính, thuộc tính hoặc nội dung văn bản của nút DOM bằng cách sử dụng chú thích bất cứ khi nào dữ liệu thay đổi.
Đường dẫn dữ liệu
Pathlà một chuỗi trong hệ thống dữ liệu, cung cấp một thuộc tính hoặc một thuộc tính phụ liên quan đến một phạm vi. Phạm vi có thể là một phần tử chủ. Các đường dẫn có thể được liên kết với các phần tử khác nhau bằng cách sử dụng liên kết dữ liệu. Thay đổi dữ liệu có thể được di chuyển từ phần tử này sang phần tử khác, nếu các phần tử được kết nối với liên kết dữ liệu.
Thí dụ
<dom-module id = "my-profile">
<template>
. . .
<address-card address="{{myAddress}}"></address-card>
</template>
. . .
</dom-module>Hai đường dẫn trên (hồ sơ của tôi và thẻ địa chỉ) có thể được kết nối với liên kết dữ liệu, nếu <address-card> nằm trong DOM cục bộ của phần tử <my-profile>.
Sau đây là các loại phân đoạn đường dẫn đặc biệt trong Polymer.js:
Ký tự đại diện (*) có thể được sử dụng làm phân đoạn cuối cùng trong đường dẫn.
Các đột biến mảng có thể được hiển thị cho một mảng nhất định bằng cách đặt các nối chuỗi làm đoạn cuối cùng trong một đường dẫn.
Đường dẫn mục mảng chỉ ra một mục trong một mảng và phân đoạn đường dẫn số chỉ định một chỉ số mảng.
Trong đường dẫn dữ liệu, mỗi đoạn đường dẫn là một tên thuộc tính và chúng bao gồm hai loại đường dẫn sau:
Các đoạn đường dẫn được phân tách bằng dấu chấm. Ví dụ: "apple.grapes.orange".
Trong một mảng chuỗi, mỗi phần tử của mảng là một đoạn đường dẫn hoặc một đường dẫn chấm. Ví dụ: ["apple", "nho", "cam"], ["apple.grapes", "cam"].
Dòng dữ liệu
Thí dụ
Ví dụ sau chỉ định ràng buộc hai chiều của luồng dữ liệu. Tạo tệp index.html và thêm mã sau vào đó.
<!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>Bây giờ, hãy tạo một tệp khác có tên my-element.html và bao gồm đoạn mã sau.
<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>Tiếp theo, tạo thêm một tệp có tên prop-element.html và thêm mã sau.
//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>Đầu ra
Chạy ứng dụng như được hiển thị trong các chương trước và điều hướng đến http://127.0.0.1:8081/. Sau đây sẽ là đầu ra.
Sau khi nhấp vào nút, nó sẽ thay đổi giá trị như được hiển thị trong ảnh chụp màn hình sau.
Liên kết hai con đường
Bạn có thể liên kết hai đường dẫn đến cùng một đối tượng bằng phương thức linkPaths và cần sử dụng liên kết dữ liệu để tạo ra các thay đổi giữa các phần tử.
Thí dụ
linkPaths('myTeam', 'players.5');Có thể xóa liên kết đường dẫn bằng phương thức unlinkPaths như hình dưới đây -
unlinkPaths('myTeam');Quan sát viên
Những thay đổi có thể quan sát được xảy ra đối với dữ liệu của phần tử gọi ra các phương thức được gọi là quan sát viên. Sau đây là các loại quan sát viên.
Các quan sát viên đơn giản được sử dụng để quan sát một thuộc tính duy nhất.
Người quan sát phức tạp được sử dụng để quan sát nhiều hơn một thuộc tính hoặc đường dẫn.
Liên kết dữ liệu
Liên kết dữ liệu có thể được sử dụng để kết nối thuộc tính hoặc thuộc tính của một phần tử từ phần tử máy chủ trong DOM cục bộ của nó. Liên kết dữ liệu có thể được tạo bằng cách thêm chú thích vào mẫu DOM như được hiển thị trong đoạn mã sau.
<dom-module id = "myhost-element">
<template>
<target-element target-property = "{{myhostProperty}}"></target-element>
</template>
</dom-module>Cấu trúc liên kết dữ liệu trong mẫu DOM cục bộ trông giống như sau:
property-name=annotation-or-compound-bindinghoặc là
attribute-name$=annotation-or-compound-bindingPhía bên trái của liên kết chỉ định thuộc tính hoặc thuộc tính đích, trong khi bên phải của liên kết chỉ định chú thích liên kết hoặc liên kết phức hợp. Văn bản trong chú thích liên kết được bao bởi dấu phân cách dấu ngoặc nhọn kép ({{}}) hoặc dấu ngoặc vuông kép ([[]]) và liên kết ghép bao gồm một hoặc nhiều chú thích ràng buộc theo chuỗi.
Sau đây là các phần tử trợ giúp, được sử dụng với các trường hợp sử dụng liên kết dữ liệu:
Template Repeater - Một thể hiện của nội dung của mẫu có thể được tạo cho mỗi mục trong một mảng.
Array Selector - Nó cung cấp trạng thái lựa chọn cho một mảng dữ liệu có cấu trúc.
Conditional Template - Bạn có thể xác định nội dung, nếu điều kiện là đúng.
Auto-binding Template - Nó chỉ định liên kết dữ liệu bên ngoài của phần tử polyme.
Cây DOM kích hoạt sự kiện thay đổi dom, nếu các phần tử trợ giúp cập nhật cây DOM. Đôi khi, bạn có thể tương tác với DOM bằng cách thay đổi dữ liệu mô hình, không phải bằng cách tương tác với các nút đã tạo. Do đó, bạn có thể sử dụng sự kiện thay đổi dom để truy cập trực tiếp vào các nút.