Javascript 聚合物组分间数据绑定？

我有一个登录组件，我想让登录状态可用于我的应用程序中的其他组件

有人能提供工作代码或示例吗

---

我至少需要某种绑定或事件，以便在登录状态更改时，这些其他感兴趣的组件的UI可以相应地更新。

创建一个表示登录组件中状态的属性，并设置

notify:true

。 在登录组件和使用该状态的任何其他组件中使用数据绑定

<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>

如果在聚合物模板之外使用组件，请使用自动绑定，方法是将组件包装在

中

（通过）演示一个组件观察另一个组件的特性

index.html

parent-element.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>

在父元素中
{{value}}
聚合物({
是：“父元素”，
特性：{
价值：{
类型：字符串
}
},
valueChanged:函数（）{
控制台日志（“值更改”）；
}
});

first-child.html

<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>

第一个要素

{{prop}}
聚合物({
是：“第一个孩子”，
特性：{
道具：{
类型：字符串，
通知：正确
}
},
就绪：函数（）{
this.prop=“property”；
}
});

second-child.html

<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>

第二个要素

{{feat1}}
聚合物({
是：“第二个孩子”，
特性：{
专长1：{
类型：字符串，
通知：正确，
值：“初始值”
}
},
就绪：函数（）{
this.addEventListener（“feat1已更改”，this.myAct）；
},
myAct:function（）{
log（“feat1已更改”，this.feat1）；
}
});

您可以使用

：

或

...
...
这个.$.meta.byKey（'info'）.getAttribute（'value'）；
....

您可以使用

聚合物({
是：“ls样本”，
特性：{
卡通：{
类型：对象
}
},
//如果未存储任何内容，则初始化默认值
initializeDefaultCartoon:函数（）{
这个.卡通={
名字：“米奇”，
哈塞尔斯：是的
}
},
//使用路径集api将更改传播到本地存储
makeModifications:function（）{
这个.set（'cartoon.name'，'Minions'）；
此.set（'cartoon.hasear'，false）；
}
});

addEventListener（）是否有效？不确定在何处添加抱歉，你能解释一下吗？这似乎不起作用。你能给我举一个简单的例子，其中一个组件可以看到另一个组件的属性吗？不幸的是，Polymer doc（）中的绑定部分似乎只讨论组件内部的绑定，而不是组件之间。另请参见：聚合物模板之外组件之间的数据绑定在文档的“自动绑定”部分中进行了描述：我想我现在了解了这里发生的事情。通过为status属性指定变量，可以将登录组件的status属性绑定到指定的变量。然后，您可以将该变量作为输入提供给其他组件。有趣：）当然，这些组件必须在同一个页面上。如果我没有错的话，这是一种指定键/值对的机制，可以从页面中的任何位置访问这些键/值对？谢谢，这个示例看起来很有趣，我将尝试进一步添加一些事件处理程序，以更改由用户操作驱动的属性。这将产生不幸的副作用，即跨页面加载持久化值，因为iron localstorage是window.localstorage（类似cookie的键值存储）的包装器。而且，答案根本没有提到它对OP的问题有什么帮助，但我认为它是从这个角度得出的：一个人可以像使用全局对象一样使用iron localstorage；每个想要访问这个全局文件的组件都可以有一个iron localstorage，并且它们都将共享该数据。

<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>

<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>

<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>