聚合物组分间数据绑定

Polymer inter-component data binding?

本文关键字：数据绑定 聚合物      更新时间：2023-09-26

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

谁能提供工作代码或示例?

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

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

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

如果你在一个聚合物模板之外使用你的组件，通过在<template is="dom-bind">中包装它们来使用自动绑定。

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

您可以使用此处描述的<iron-localstorage> 

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

看这个Plunker的例子(由@nazerke)演示了一个组件观察另一个组件的属性。

http://plnkr.co/edit/p7R8BqJJfoYMVA3t3DbX?p =

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

您可以使用<iron-meta>如下所述:

<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>
相关文章：