Polymer 聚合物2：让两种元素通过混合相互对话_Polymer_Mixins_Web Component

Polymer 聚合物2：让两种元素通过混合相互对话

polymer

Polymer 聚合物2：让两种元素通过混合相互对话,polymer,mixins,web-component,Polymer,Mixins,Web Component,我正在尝试构建一个应用程序，其中一些元素的状态取决于其他元素中的操作。此外，这些元素具有一些公共属性和方法，我认为应该使用mixin来处理这些属性和方法。不幸的是，我似乎无法让mixed-in属性更改触发另一个方法中的方法一些背景：这是为了构建一个数据可视化应用程序，其中相同数据的不同视图（因此mixin中的“数据”属性）在不同的元素中处理，在其中选择一些点应该突出显示其他图中的相同点。我想双向绑定起到了一定的作用，但我就是不能让它工作。。。因此，非常感谢您的帮助。或者有更好的方法在元素之间

我正在尝试构建一个应用程序，其中一些元素的状态取决于其他元素中的操作。此外，这些元素具有一些公共属性和方法，我认为应该使用mixin来处理这些属性和方法。不幸的是，我似乎无法让mixed-in属性更改触发另一个方法中的方法

一些背景：这是为了构建一个数据可视化应用程序，其中相同数据的不同视图（因此mixin中的“数据”属性）在不同的元素中处理，在其中选择一些点应该突出显示其他图中的相同点。我想双向绑定起到了一定的作用，但我就是不能让它工作。。。因此，非常感谢您的帮助。或者有更好的方法在元素之间共享数据和数据集吗

我用控制台日志组装了一个极简示例来说明这个问题。以下代码包括：

index.html：调用通用聚合物应用程序
聚合物测试应用程序：调用两个不同的自定义元素
my element one：显示文本“Click me”，它触发mixin中定义的属性的更改
my element 2：应在每次单击自定义元素1中的文本时将新属性值打印到控制台（但它没有）
my mixin：定义共享属性及其应触发的方法

因此，在我的元素1中单击文本“我是元素1。单击我”应该会触发“myvalue”的更改，它应该在我的元素2中调用“\u shout”

index.html

<!doctype html>
<html lang="en">
  <head>
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

    <link rel="import" href="/src/polymer-test-app/polymer-test-app.html">
    <link rel="import" href="/src/my-element-one/my-element-one.html">
    <link rel="import" href="/src/my-element-two/my-element-two.html">
    <script src="/src/my-mixin/my-mixin.js"></script>
  </head>
  <body>
    <polymer-test-app></polymer-test-app>
  </body>
</html>

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<script src="/src/my-mixin/my-mixin.js"></script>

<dom-module id="my-element-two">
  <template>
    In template of my-element-two
  </template>

  <script>
    class MyElementTwo extends Polymer.Element {
      static get is() { return 'my-element-two'; }

      _shout() {
        console.log("Value changed: " + this.myvalue)
      }
    }

    window.customElements.define(MyElementTwo.is, MyElementTwo);
  </script>
</dom-module>

在聚合物测试应用程序中定义

mv

属性就足够了。在该

mv

属性上设置观测者，以调用您在

polymer test app

中定义的某个函数，在该函数中，您可以调用

函数内部我的元素二
，参数表示我的值
属性的值（此值作为观察者调用的函数中的参数获取）。你似乎不了解混合器及其工作原理。我没有使用Polymer 2.0，但请尝试我的解决方案，如果你需要更多帮助，我会解释更多感谢你的提示！我会尝试一下。但是，我不知道如何从我的element 2
从Polymer test app
中调用\u shout
函数。你能吗告诉我怎么做？此外，在我的最终应用程序中，将有几个（5-10）不同的自定义元素各有其自己的\u shout
实现。您的解决方案仍然有效吗？我假设，当1个输入发生变化时，您需要更新所有这些元素？如果是，那么您必须，例如，将classshout
设置为所有要更新的元素，然后在JS中，查找带有class的所有元素shout
并调用\u shout
函数。回到您的问题，如何调用自定义元素内的函数：只需执行这个.shadowRoot.querySelector（'my-element-two'）。\u shout（someValue）。如果您使用的是shadow dom，这是有效的。我假设您会这样做。您可以将选择器更改为您想要的任何值
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<script src="/src/my-mixin/my-mixin.js"></script>

<dom-module id="my-element-one">
  <template>
    In template of my-element-one<br/>
    <div on-click="handleClick">I am element 1. Click me</div>
  </template>

  <script>
    class MyElementOne extends Polymer.Element {
      static get is() { return 'my-element-one'; }

      ready() {
        super.ready()
        this.myvalue = 1
      }

      handleClick() {
        this.myvalue = Math.floor(Math.random()*100)
        console.log(this.myvalue)
      }

    }

    window.customElements.define(MyElementOne.is, MyElementOne);
  </script>
</dom-module>

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<script src="/src/my-mixin/my-mixin.js"></script>

<dom-module id="my-element-two">
  <template>
    In template of my-element-two
  </template>

  <script>
    class MyElementTwo extends Polymer.Element {
      static get is() { return 'my-element-two'; }

      _shout() {
        console.log("Value changed: " + this.myvalue)
      }
    }

    window.customElements.define(MyElementTwo.is, MyElementTwo);
  </script>
</dom-module>

MyMixin = function(superClass) {
  return class extends superClass {
    static get properties() {
      return {
        "myvalue": {
          "type": "Number",
          "value": 0,
          "notify": true,
          "observer": '_shout'
        }
      }
    }
  }
}