聚合物数据的变化不反映

Question

我试图隐藏/取消一个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已更改为所需的值，但无论如何，元素都是隐藏的。有什么事情我需要做/自动强制更新内容吗？为什么这不管用？如何通过更改px-card变量来确保隐藏hide元素？

Answer 1

问得好。所以，首先，我想强调的是，这个聚合物组件的当前JS代码实际上不是“非常聚合物”，所以您正在以非常"jQuery的方式“与DOM交互，而不是使用聚合物库的所有优点。

我建议如何重写该代码：

<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属性，而不是直接操作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"); 

此代码示例显示了上面的操作。。

Web组件最佳实践有关于使用:host选择器的更多信息。