html - polymer 数据变化不反射(reflect)

Question

我试图在 Polymer 中使用按钮隐藏/取消隐藏 UI 元素，但它不起作用。我有按钮和元素:

<button id="runPredictionButton">
    <i>Button text</i>
</button>
<px-card 
hidden$="{{hide}}">    
//...content here
</px-card>
<div class="output"></div>          

我还定义了属性和事件监听器:

  <script>
    Polymer({
      is: 'custom-view',
      properties: {
        hide: {
          type: Boolean,
          value: false 
        },
      },
    ready: function() {
      var self = this;
      this.$.runPredictionButton.addEventListener('click', function() {
        if (some_conditon == true) {
          filerootdiv.querySelector('.output').innerHTML = 'Is true';          
          this.hide = true
          console.log("This hide should be true:" + this.hide);
        } 
        else {
          filerootdiv.querySelector('.output').innerHTML = 'Is false';          
          this.hide = false
          console.log("This hide should be false:" + this.hide);
        }
      });
    }
  });      
  </script>

我确定 some_conditon 有效，因为 .output 元素的内容确实发生了变化，但是 px-card 元素没有完全隐藏/取消隐藏。此外，在控制台上我可以看到 this.hide 已更改为所需的值，但无论如何该元素都保持隐藏状态。有什么我需要做的/自动强制更新内容吗？为什么这不起作用？如何确保通过更改 hide 变量隐藏 px-card 元素？

Answer 1

好问题。因此，首先我想强调的是，该 Polymer 组件的当前 JS 代码实际上并不是“非常 Polymer”，因此您以非常“jQuery 方式”与 DOM 交互，而不是使用 Polymer 库的所有优点。

我建议如何重写该代码:

<button on-tap="hidePxCard">
    <i>Button text</i>
</button>
<px-card
hidden$="[[hide]]">
<!-- ...content here -->
</px-card>
<div class="output"></div>

因此，我们在这里添加了 1) 点击事件处理程序 hidePxCard 2) [[hide]] 从双向竞价切换为单向竞价通过方括号，因此，没有理由使用双向绑定(bind)。

然后，我们来调整js部分:

<script>
    Polymer({
        is: 'custom-view',
        properties: {
            hide: {
                type: Boolean,
                value: false
            }
        },
        hidePxCard: function() {
            this.set('hide', !this.hide);
        }
    });
</script>

您能看到现在的代码看起来多干净吗？我们只是在每次调用 hidePxCard 时设置一个属性。我们的目标是，我们需要使用绑定(bind)到 html 属性的 Polymer 属性进行操作，而不是直接操作 DOM。因此，您的元素现在是数据驱动的。

此外，我假设当元素上存在 [hidden] 属性时，存在一些 CSS 代码来隐藏某些内容。

它可以在 px-card 元素中通过:

<style>
    :host{
        display: block;
    }
    :host[hidden]{
        display: none;
    }
</style>

或在应用程序(页面)的某个地方设置为全局样式。