CODEWITHSUNDEEP
polymerpolymer-2.x
Shahid Nauman
Shahid Nauman

Reputation: 23

How can I compute a property based on another element's property?

I am trying to show/hide elements based on the availability of camera.

The detect-camera, camera-detached and create-welcome all are inside main create-app.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">

<link rel="import" href="detect-camera.html">
<link rel="import" href="camera-detached.html">
<link rel="import" href="create-welcome.html">

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

        <detect-camera found=[[found]]></detect-camera>
        <template is="dom-if" if="{{!allowed}}">
            <camera-detached></camera-detached>
        </template>
        <template is="dom-if" if="{{allowed}}">
            <create-welcome></create-welcome>
        </template>
  </template>
  <script>
    class CreateApp extends Polymer.Element {
      static get is() {
        return 'create-app';
      }

      constructor() {
        super();
      }

      static get properties() {
        return {
          allowed: {
            type: Boolean,
            computed: '_isAllowed(found)'
          }
        };
      }

      _isAllowed(found) {
        return found;
      }
    }

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

The camera-detached and create-welcome will be displayed on the logic, if or not the "found" property of detect-camera is true.

All the logic of detecting the camera is inside detect-camera. The code inside detect-camera sets its attribute "found" property/attribute.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="detect-camera">
  <template>
  </template>

  <script>
    class DetectCamera extends Polymer.Element {
      static get is() {
        return 'detect-camera';
      }

      static get properties() {
        return {
          found: {
            type: Boolean,
            value: false,
            reflectToAttribute: true,
            notify: true
          }
        }
      }

      constructor() {
        super();
        this._foundChanged
      }

      _foundChanged() {
        this.found = true;
      }
    }

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

I want to compute the "allowed" based on the computed "found" property.

Upvotes: 2

Views: 129

Answers (3)

Shahid Nauman
Shahid Nauman

Reputation: 23

Fortunately, Some one over Slack named "fm" found the "something missing" in my code. He just notice that there is a missing quotation and a two way binding in my code.

<detect-camera found={{allowed}}></detect-camera> should be <detect-camera found="{{allowed}}"></detect-camera>

Also, we don't need to compute the "allowed" in "create-app" in this case. It's been automatically set by "found" property.

Upvotes: 0

jrobinson
jrobinson

Reputation: 26

Use two-way binding:

<detect-camera found="{{found}}"></detect-camera>

or listen for the found property to change:

<detect-camera on-found-changed="onFoundChanged"></detect-camera>

If you use the event listener approach, you just need to update a local property in your CreateApp element:

onFoundChanged(newVal, oldVal) {
  this.hasCamera = newVal;
}

Upvotes: 0

mishu
mishu

Reputation: 5397

You could query the Shadow DOM from create-app, looking for the detect-camera element and check its attributes.

But that wouldn't be very Polymer-ish or extensible for that matter. In general data should flow down by attributes/properties and up by events.

So I would recommend that from the detect-camera element, where you set the found attribute you would also trigger a custom event, let's say camera-found and in this wrapping element you would start assuming that it's not and update it with a listener on that event.

Take a look here at dispatchEvent and hot to listen for it. Don't forget the note about bubbles: true, composed: true to be able to listen for the custom event from "outside"

Upvotes: 1

Related Questions