Question

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

一些背景知识：这是建立一个数据可视化应用程序，其中相同数据的不同视图（因此mixin中的“数据”属性）在不同的元素中处理，并且在一个中选择一些点应突出显示相同的点其他情节。我认为双向绑定起作用，但我无法让它工作......所以任何帮助都非常感激。或者有更好的方法在元素之间共享数据和数据集吗？

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

index.html：调用通用聚合物应用
polymer-test-app：调用两个不同的自定义元素
my-element-one：显示文本“Click me”，触发mixin中定义的属性的更改
my-element-two：每次点击custom-element-one中的文本时都应该将新属性值打印到控制台（但是没有）
my-mixin：定义共享属性以及应触发的方法

所以点击my-element-one中的文字“我是元素1.点击我”应该触发“myvalue”的变化，这应该在my-element-two中调用“_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">

<dom-module id="polymer-test-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <h4>Polymer test app</h4>
    <my-element-one myvalue={{mv}}>Test element 1</my-element-one><br/>
    <my-element-two myvalue={{mv}}>Test element 2</my-element-two>
  </template>

  <script>
    class PolymerTestApp extends Polymer.Element {
      static get is() { return 'polymer-test-app'; }
    }

    window.customElements.define(PolymerTestApp.is, PolymerTestApp);
  </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-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>

我元件-two.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>

我-mixin.js

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

聚合物2：让2个元素通过mixin相互通信

0 个答案: