聚合物组件间数据绑定？

Question

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

任何人都可以提供工作代码或示例吗？

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

Answer 1

在您的登录组件中创建一个代表状态的属性并设置 notify: true。在您的登录组件和使用该状态的任何其他组件中使用数据绑定。

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

如果您在 Polymer 模板之外使用您的组件，请将它们包装在 <template is="dom-bind"> 中以使用自动绑定。

<template is="dom-bind">
    <login-component status="{{status}}"></login-component>
    <other-component login="{{status}}"></other-component>
</template>

Answer 2

See this Plunker example (by @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>

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>

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>

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>

Answer 3

您可以使用 <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>

Answer 4

您可以使用 <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>

聚合物组件间数据绑定？

Polymer inter-component data binding?

javascript

data-binding

2-way-object-databinding

polymer

polymer-1.0