Question

我试图根据相机的可用性显示/隐藏元素。

检测相机，相机分离和创建欢迎都位于主 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>

相机分离和创建欢迎将显示在逻辑上，如果 找到“属性 detect-camera 是真的。

检测相机的所有逻辑都在检测相机内。 detect-camera 中的代码设置其属性“找到”属性/属性。

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

我想根据计算出的“找到”属性来计算“允许”。

Answer 1

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

但就此而言，这不是非常聚合或可扩展的。通常，数据应按属性/属性向下流动，然后向上流动。

所以我建议您从detect-camera元素中设置found属性，同时触发自定义事件，让我们说camera-found并在此包装中元素你会开始假设它不是，并在那个事件上用一个监听器更新它。

在dispatchEvent上查看here，然后热点来监听它。不要忘记关于bubbles: true, composed: true的注释，以便能够从＆＃34;外部＆＃34;

收听自定义事件

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

幸运的是，有一个名为“fm”的Slack在我的代码中找到了“缺少的东西”。他只是注意到我的代码中缺少引号和双向绑定。

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

此外，在这种情况下，我们无需计算“ create-app ”中的“允许”。它已由“找到”属性自动设置。

如何根据其他元素的属性计算属性？

3 个答案: