Tôi có một thành phần đăng nhập và tôi muốn tạo trạng thái đăng nhập cho các thành phần khác trong ứng dụng của mình.Gắn kết dữ liệu liên thành phần polymer?
Có ai có thể cung cấp mã hoặc ví dụ làm việc không?
Tôi cần một số loại ràng buộc hoặc sự kiện ít nhất, để khi trạng thái đăng nhập thay đổi, giao diện người dùng của các thành phần quan tâm khác này có thể được cập nhật tương ứng.
Tạo thuộc tính đại diện cho trạng thái trong thành phần đăng nhập của bạn và đặt notify: true. Sử dụng ràng buộc dữ liệu trong thành phần đăng nhập của bạn và bất kỳ thành phần nào khác sử dụng trạng thái đó.
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
Nếu bạn sử dụng các thành phần bên ngoài mẫu Polymer, hãy sử dụng autobind bằng cách gói chúng trong <template is="dom-bind">.
<template is="dom-bind">
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
</template>
điều này dường như không hoạt động. bạn có thể giới thiệu tôi đến một ví dụ đơn giản mà một thành phần có thể nhìn thấy tài sản của một người khác không? – Janos
không may phần ràng buộc trong tài liệu Polymer (https://www.polymer-project.org/1.0/docs/devguide/data-binding.html) dường như chỉ nói về ràng buộc bên trong một thành phần, chứ không phải giữa các thành phần. – Janos
cũng xem: http://stackoverflow.com/questions/23522037/data-binding-between-nested-polymer-elements – Janos
See this Plunker example (bởi @nazerke) thể hiện một thành phần quan sát tài sản của người khác.
http://plnkr.co/edit/p7R8BqJJfoYMVA3t3DbX?p=preview
index.html<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="parent-element.html">
<link rel="import" href="first-child.html">
<link rel="import" href="second-child.html"> </head>
<body>
<parent-element></parent-element>
</body>
</html>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="parent-element">
<template>
<first-child prop={{value}}></first-child>
<second-child feat1={{prop}}></second-child> In parent-element
<h1>{{value}}</h1> </template>
<script>
Polymer({
is: "parent-element",
properties: {
value: {
type: String
}
},
valueChanged: function() {
console.log("value changed");
}
});
</script>
</dom-module>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="first-child">
<template>
<p>first element.</p>
<h2>{{prop}}</h2> </template>
<script>
Polymer({
is: "first-child",
properties: {
prop: {
type: String,
notify: true
}
},
ready: function() {
this.prop = "property";
}
});
</script>
</dom-module>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="second-child">
<template>
<p>Second element.</p>
<h2>{{feat1}}</h2> </template>
<script>
Polymer({
is: "second-child",
properties: {
feat1: {
type: String,
notify: true,
value: "initial value"
}
},
ready: function() {
this.addEventListener("feat1-changed", this.myAct);
},
myAct: function() {
console.log("feat1-changed ", this.feat1);
}
});
</script>
</dom-module>
Cảm ơn, ví dụ có vẻ thú vị, tôi sẽ cố gắng thực hiện thêm một chút bằng cách thêm một số trình xử lý sự kiện sẽ thay đổi thuộc tính được điều khiển bởi một hành động người dùng – Janos
Bạn có thể sử dụng <iron-meta>as described here:
<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').
hoặc
document.createElement('iron-meta').byKey('info').getAttribute('value');
hoặc
<template>
...
<iron-meta id="meta"></iron-meta>
...
this.$.meta.byKey('info').getAttribute('value');
....
</template>
nếu tôi không sai, đó là một loại cơ chế để chỉ định khóa/các cặp giá trị có thể được truy cập từ bất kỳ đâu trong trang? – Janos
Bạn có thể sử dụng <iron-localstorage>as described here.
<dom-module id="ls-sample">
<iron-localstorage name="my-app-storage"
value="{{cartoon}}"
on-iron-localstorage-load-empty="initializeDefaultCartoon"
></iron-localstorage>
</dom-module>
<script>
Polymer({
is: 'ls-sample',
properties: {
cartoon: {
type: Object
}
},
// initializes default if nothing has been stored
initializeDefaultCartoon: function() {
this.cartoon = {
name: "Mickey",
hasEars: true
}
},
// use path set api to propagate changes to localstorage
makeModifications: function() {
this.set('cartoon.name', "Minions");
this.set('cartoon.hasEars', false);
}
});
</script>
Điều này sẽ có tác dụng phụ không mong muốn của sự bền bỉ giá trị trên các tải trang, vì iron-localstorage là một trình bao bọc xung quanh window.localStorage (một kho lưu trữ khóa-giá trị giống như cookie). Ngoài ra, câu trả lời không đề cập đến cách nó sẽ giúp câu hỏi của OP, nhưng tôi nghĩ rằng nó đã nhận được điều này: người ta có thể sử dụng iron-localstorage gần giống như một đối tượng toàn cầu; mọi thành phần muốn truy cập vào toàn cầu này đều có thể có bộ lưu trữ cục bộ bằng sắt và tất cả chúng sẽ chia sẻ dữ liệu đó. – Verdagon
addEventListener() hoạt động? – dandavis
không chắc chắn nơi để thêm rằng xin lỗi, bạn có thể giải thích? – Janos