如何根据另一个元素的属性计算属性？

Question

我正在尝试 show/hide 基于相机可用性的元素。

detect-camera、camera-detached和create-welcome都在里面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>

camera-detached 和 create-welcome 将显示在逻辑上，如果“发现" detect-camera 的属性是正确的。

检测摄像头的所有逻辑都在detect-camera里面。 detect-camera 中的代码设置其属性“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>

我想根据计算出的“found”属性.[=14= 来计算“allowed” ]

Answer 1

您可以从 create-app 查询影子 DOM，查找 detect-camera 元素并检查其属性。

但是就此而言，它不是很像 Polymer 或可扩展的。一般来说，数据应按 attributes/properties 向下流动，按事件向上流动。

所以我建议从 detect-camera 元素开始，您设置 found 属性的地方也会触发一个自定义事件，比方说 camera-found 并且在这个包装元素中您将开始假设它不是，并使用该事件的侦听器更新它。

查看 here dispatchEvent 并热听它。不要忘记关于 bubbles: true, composed: true 的注释，以便能够从 "outside"

监听自定义事件

Answer 2

使用双向绑定：

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

或监听 found 属性更改：

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

如果您使用事件侦听器方法，您只需在 CreateApp 元素中更新本地属性：

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

Answer 3

幸运的是，Slack 上的某个名为 "fm" 的人在我的代码中找到了 "something missing"。他只是注意到我的代码中缺少引号和双向绑定。

<detect-camera found={{allowed}}></detect-camera> 应该是 <detect-camera found="{{allowed}}"></detect-camera>

此外，在这种情况下，我们不需要计算“create-app”中的“allowed”。它由“found”属性.

自动设置

如何根据另一个元素的属性计算属性？

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

polymer

polymer-2.x

如何根据另一个元素的 属性 计算 属性？

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

polymer

polymer-2.x

如何根据另一个元素的属性计算属性？