Html 聚合物数据变化不存在'；不反映

我试图隐藏/取消隐藏一个带有按钮的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>

聚合物({
是：“自定义视图”，
特性：{
隐藏：{
类型：布尔型，
值：false
},
},
就绪：函数（）{
var self=这个；
此.$.runPredictionButton.addEventListener（'单击'，函数（））{
如果（某些条件==真）{
filerootdiv.querySelector（'.output'）。innerHTML='为true'；
this.hide=true
log（“此隐藏应该为true:+This.hide”）；
} 
否则{
filerootdiv.querySelector（'.output'）。innerHTML='为false'；
this.hide=false
log（“此隐藏应为false:+This.hide”）；
}
});
}
});      

---

我确信

某些条件是有效的，因为
.output
元素的内容确实会改变，但是
px-card
元素根本不会隐藏/取消隐藏。此外，在控制台上，我可以看到
this.hide
已更改为所需的值，但无论发生什么情况，元素都保持隐藏状态。是否需要执行某些操作/自动强制更新内容？为什么这不起作用？如何通过更改
hide
变量来确保隐藏
px卡
元素？
可能是CSS规则阻止了它被隐藏

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


有关于使用主机选择器的更多信息。
好问题。因此，首先我想强调的是，聚合物组件的当前JS代码实际上不是“非常聚合物”，因此您以非常“jQuery方式”与DOM交互，而不是使用聚合物库的所有优点

我建议如何重写该代码：

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

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

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

可通过以下方式在px卡的
元件内完成：

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


：主持人{
显示：块；
}
：主机[隐藏]{
显示：无；
}

或者在应用程序（第页）的某个地方设置为全局样式。
对不起，我忘了更新-这已在另一个论坛上得到回答，解决方案是使用
self.hide
而不是
this.hide
。
<button on-tap="hidePxCard">
    <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
            }
        },
        hidePxCard: function() {
            this.set('hide', !this.hide);
        }
    });
</script>

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