У меня есть компонент входа, и я хотел бы сделать статус входа доступным для других компонентов в моем приложении.Полимерное межкомпонентное связывание данных?
Может ли кто-нибудь предоставить рабочий код или примеры?
Мне нужно какое-то привязку или событие, по крайней мере, так, чтобы при изменении состояния входа пользовательский интерфейс этих других заинтересованных компонентов мог быть соответствующим образом обновлен.
Создайте свойство, которое представляет статус вашего компонента входа и установите notify: true. Используйте привязку данных в своем компоненте входа и любых других компонентах, которые используют этот статус.
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
Если вы используете компоненты за пределами шаблона Polymer, использовать autobind, обернув их в <template is="dom-bind">.
<template is="dom-bind">
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
</template>
это не работает. можете ли вы направить меня на простой пример, когда один компонент может видеть другое свойство? – Janos
К сожалению, секция связывания в документе Polymer doc (https://www.polymer-project.org/1.0/docs/devguide/data-binding.html), по-видимому, говорит только о привязке внутри компонента, а не к компонентам. – Janos
см. Также: http://stackoverflow.com/questions/23522037/data-binding-between-nested-polymer-elements – Janos
See this Plunker example (от @nazerke) демонстрирует один компонент наблюдения чужого имущества.
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>
Спасибо, пример выглядит интересным, я попытаюсь взять его немного дальше, добавив некоторый обработчик событий, который изменит свойство, управляемое действием пользователя – Janos
Вы можете использовать <iron-meta>as described here:
<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').
или
document.createElement('iron-meta').byKey('info').getAttribute('value');
или
<template>
...
<iron-meta id="meta"></iron-meta>
...
this.$.meta.byKey('info').getAttribute('value');
....
</template>
, если я не ошибаюсь, это своего рода механизм для указания ключа/которые могут быть доступны из любой точки страницы? – Janos
Вы можете использовать <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>
Это будет иметь неприятный побочный эффект от сохранения значения на загрузках страниц, так как iron-localstorage является оберткой вокруг window.localStorage (хранилище с ключом для файлов cookie). Кроме того, в ответе не упоминается вообще, как это могло бы помочь в вопросе П. П., но я думаю, что это получалось: можно использовать iron-localstorage почти как глобальный объект; каждый компонент, который хочет получить доступ к этому глобальному, может иметь железо-localstorage, и все они будут делиться этими данными. – Verdagon
делает addEventListener() работа? – dandavis
Не знаете, где добавить это извините, не могли бы вы объяснить? – Janos