2017-10-27 3 views
2

Ich versuche, Elemente basierend auf der Verfügbarkeit der Kamera anzuzeigen/zu verbergen.Wie kann ich eine Eigenschaft basierend auf der Eigenschaft eines anderen Elements berechnen?

Die Ermittlungs- Kamera, Kamera Haus und create-willkommen alle sind innerhalb der Haupt 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>

Die Kamera Haus und create-willkommen wird auf der Logik angezeigt werden, wenn oder nicht Eigentum von Ermittlungs- Kamera " gefunden" ist wahr .

Die gesamte Logik der Erkennung der Kamera ist innerhalb detect-Kamera. Der Code innerhalb detect-camera setzt sein Attribut "gefunden" Eigenschaft/Attribut.

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

Ich möchte die "erlaubt" Basis berechnen auf der berechneten Eigenschaft " gefunden".

+0

auf einen Blick: Ihnen fehlen einige Zitate 'gefunden = [[gefunden]]' hier. auch, nicht 100% sicher, aber ich denke, das wird nicht so funktionieren, wie du es erwartest "if =" {{! allowed}} "'. 'this._foundChanged' auch ein ungültiger Aufruf einer Methode. Eine letzte Sache: ziemlich sicher, dass Sie eine Zwei-Wege-Bindung für "gefunden" benötigen, wenn Sie sie in der berechneten "isAllowed" verwenden wollen – DVM

Antwort

0

Sie können das Shadow-DOM von create-app abfragen und nach dem Element detect-camera suchen und dessen Attribute überprüfen.

Aber das wäre nicht sehr Polymer-ish oder erweiterbar für diese Angelegenheit. Im Allgemeinen sollten die Daten nach Attributen/Eigenschaften und nach Ereignissen nach unten fließen.

So würde ich das aus dem detect-camera Elemente empfehlen, in dem Sie die found Attribute festgelegt würden Sie auch ein benutzerdefiniertes Ereignis auslösen, lassen Sie sich camera-found sagen und in diesem Verpackungselement beginnen würden Sie davon aus, dass es nicht und aktualisieren Sie es mit einem Hörer auf dieses Ereignis.

Werfen Sie einen Blick auf here bei dispatchEvent und heiß darauf zu hören. Sie nicht die Notiz bubbles: true, composed: true vergessen zu können, für das benutzerdefinierte Ereignis hören von „außen“

0

Verwenden Zwei-Wege-Bindung:

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

oder hören für die found Eigenschaft zu ändern:

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

Wenn Sie den Ereignis-Listener Ansatz verwenden, müssen Sie nur eine lokale Eigenschaft in Ihrem CreateApp Elemente aktualisieren:

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

Zum Glück hat jemand über Slack namens "fm" das "etwas fehlt" in meinem Code gefunden. Er bemerkt nur, dass in meinem Code ein Zitat und eine Zwei-Wege-Bindung fehlen.

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

auch sein, wir die "erlaubt" in "create-App" in diesem Fall nicht berechnen müssen. Es wurde automatisch von der Eigenschaft "gefunden" festgelegt.

Verwandte Themen