Polymer 用铁元管理聚合物2.x中的状态
我正在尝试使用Polymer 用铁元管理聚合物2.x中的状态,polymer,state,polymer-2.x,iron-elements,Polymer,State,Polymer 2.x,Iron Elements,我正在尝试使用iron meta管理聚合应用程序中的状态 在同一个Plunker上,我还使用mixin来管理状态。(因此我们可以比较这两种系统。) 期望行为 在演示的底部,我希望“Meta”后面的部分匹配并跟踪“Send notifications”选项后面的部分是:“单击顶部标记为“Send notifications”的选项复选框时 实际行为 但是,我得到的实际行为不是期望的行为,而是“Meta says:”部分从不填充任何数据 演示 演示屏幕录制 my-view2.html <l
iron meta
管理聚合应用程序中的状态
在同一个Plunker上,我还使用mixin来管理状态。(因此我们可以比较这两种系统。)
期望行为
在演示的底部,我希望“Meta”后面的部分匹配并跟踪“Send notifications”选项后面的部分是:“单击顶部标记为“Send notifications”的选项复选框时
实际行为
但是,我得到的实际行为不是期望的行为,而是“Meta says:”部分从不填充任何数据
演示
演示屏幕录制
my-view2.html
<link rel="import" href="my-options.html">
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-meta/iron-meta.html">
<dom-module id="my-view2">
<template>
<style>
:host {
display: block;
padding: 10px;
}
</style>
<iron-meta key="meta" value="{{meta}}"></iron-meta>
<my-options></my-options>
<div class="card">
<div class="circle">2</div>
<h1>View Two</h1>
<p>Ea duis bonorum nec, falli paulo aliquid ei eum.</p>
<p>Id nam odio natum malorum, tibique copiosae expetenda mel ea.Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.Id nam odio natum malorum, tibique copiosae expetenda mel ea.</p>
<p>Send notifications option is: <b>[[ options.subscribe ]]</b></p>
<p>Meta says: <b>[[ meta ]]</b></p>
</div>
</template>
<script>
class MyView2 extends MyOptionsMixin(Polymer.Element) {
static get is() {
return 'my-view2';
}
}
window.customElements.define(MyView2.is, MyView2);
</script>
</dom-module>
:主持人{
显示:块;
填充:10px;
}
2.
视图二
这是一个很好的例子,保罗的流动性很好
我不知道该怎么办,因为我国的泰比克人的经验是有限的。这是一个非常小的解决方案,它是一个非常小的解决方案
发送通知选项为:[[options.subscribe]]
梅塔说:[[Meta]]
类MyView2扩展了MyOptionMixin(Polymer.Element){
静态get是(){
返回'my-view2';
}
}
window.customElements.define(MyView2.is,MyView2);
my-options.html
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="iron-meta/iron-meta.html">
<dom-module id="my-options">
<template>
<style>
:host {
display: block;
padding: 16px;
}
h3, p {
margin: 8px 0;
}
</style>
<iron-meta key="meta" value="[[options.subscribe]]"></iron-meta>
<h3>Options</h3>
<p>
<paper-checkbox checked="{{ options.subscribe }}">Send Notifications</paper-checkbox>
</p>
</template>
<script>
(function() {
let optionsInstance = null;
class MyOptions extends Polymer.Element {
static get is() { return 'my-options'; }
static get properties() {
return {
options: {
type: Object,
value: () => ({
subscribe: false
})
},
subscribers: {
type: Array,
value: () => []
}
}
}
static get observers() {
return [
'optionsChanged(options.*)'
]
}
constructor() {
super();
if (!optionsInstance) optionsInstance = this;
}
register(subscriber) {
this.subscribers.push(subscriber);
subscriber.options = this.options;
subscriber.notifyPath('options');
}
unregister(subscriber) {
var i = this.subscribers.indexOf(subscriber);
if (i > -1) this.subscribers.splice(i, 1)
}
optionsChanged(change) {
for(var i = 0; i < this.subscribers.length; i++) {
this.subscribers[i].notifyPath(change.path);
}
}
}
window.customElements.define(MyOptions.is, MyOptions);
MyOptionsMixin = (superClass) => {
return class extends superClass {
static get properties() {
return {
options: {
type: Object
}
}
}
connectedCallback() {
super.connectedCallback();
optionsInstance.register(this);
}
disconnectedCallback() {
super.disconnectedCallback();
optionsInstance.unregister(this);
}
}
}
}());
</script>
</dom-module>
:主持人{
显示:块;
填充:16px;
}
h3,p{
利润率:8px0;
}
选择权
发送通知
(功能(){
让optionInstance=null;
类MyOptions扩展了Polymer.Element{
静态get是(){return'my options';}
静态获取属性(){
返回{
选项:{
类型:对象,
值:()=>({
订阅:false
})
},
订户:{
类型:数组,
值:()=>[]
}
}
}
静态获取观察器(){
返回[
'选项已更改(选项。*)'
]
}
构造函数(){
超级();
如果(!optionInstance)optionInstance=this;
}
登记册(订户){
this.subscribers.push(subscriber);
subscriber.options=this.options;
subscriber.notifyPath('options');
}
注销(订户){
var i=this.subscribers.indexOf(订户);
如果(i>-1)此.subscribers.splice(i,1)
}
选项已更改(更改){
对于(var i=0;i{
返回类扩展了超类{
静态获取属性(){
返回{
选项:{
类型:对象
}
}
}
connectedCallback(){
super.connectedCallback();
optionInstance.register(此选项);
}
disconnectedCallback(){
super.disconnectedCallback();
选项实例。取消注册(此选项);
}
}
}
}());
简短的回答是:
不支持通知。
您的示例依赖于这样一个事实:双向绑定可以工作,并且当观察到的键发生更改时,meta
属性会得到更新。事实并非如此。在内部,值只是分配给一个全局存储,没有发布/订阅机制。
如果您使用的是Polymer 1.x,那么该元素可能会满足您的需求:
是否只有iron meta
能够有效地管理应用程序中的状态?我不认为iron meta实现了对发布/订阅的支持,即,如果在将键绑定到属性后值发生更改,则双向绑定将不起作用。我建议使用一个框架,如Redux,来处理此阶段。