聚合物数据变化不反映

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]] 从双向出价切换为单向，因此，没有理由使用两个-方式绑定。

那么，我们来调整一下js部分：

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

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

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

可以通过以下方式在px-card 元素内完成：

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

或在某处设置为跨应用（页面）的全局样式。

Answer 2

也许是 CSS 规则阻止它被隐藏？

确保您要隐藏的内容已设置样式，以便浏览器知道当hidden 为真时该做什么（即，浏览器应将display 设置为none）。例如：

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

要查看这是否确实是您的问题的原因，您可以查看以下信息：

getComputedStyle(elementToHide).getPropertyValue("display"); 

This code sample shows the above in action。

Web Components Best Practices 有更多关于使用:host 选择器的信息。