Polymer 2: letting 2 elements talk to each other through mixin.

41 views

Skip to first unread message

jan....@gmail.com

unread,

Jun 15, 2017, 8:16:12 AM6/15/17

to Polymer

Hi all,

I'm trying to build an application where the state of some elements depends on actions in others. Also, these elements have some common properties and methods, which I suppose should be handled with mixins. Unfortunately, it seems that I'm unable to let the mixed-in property change trigger a method in another method.

Some background: this is to build a data visualization app where different views on the same data (hence a "data" property in a mixin) is handled in different elements, and selecting some points in one should highlight the same points in the other plots. I suppose that two-way binding plays a role, but I just can't get it to work... So any help very much appreciated.

Or are there better ways to share data and datasets between elements?

I've assembled a minimalist example just using console log to illustrate the issue. The code below consists of:

* index.html: calls the general polymer app

* polymer-test-app: calls two different custom elements

* my-element-one: Shows the text "Click me", which triggers a change in a property that is defined in the mixin

* my-element-two: Should print the new property value to console every time the text in custom-element-one is clicked (BUT IT DOESN'T)

* my-mixin: Defines the shared property and which method it should trigger

So clicking the text in my-element-one should trigger a change in "myvalue" which should call "_shout" in my-element-two

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>

polymer-test-app

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

my-element-one

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

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

my-mixin.js

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

jrobins...@gmail.com

unread,

Jun 16, 2017, 9:46:14 AM6/16/17

to Polymer, jan....@gmail.com

Instead of using a mixin, you can declare the shared property in your app component and then use data-binding to share it with the two child components.

Reply all

Reply to author

Forward

0 new messages