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已被更改为所需的值，但无论如何，元素都会保持隐藏状态。有什么我需要做/自动强制内容更新？为什么这不起作用？如何通过更改px-card变量来确保隐藏hide元素？

Answer 1

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

确保要隐藏的内容设置样式，以便浏览器知道当hidden为真时要执行的操作（即，浏览器应将display设置为none）。 E.g：

<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选择器的更多信息。

Answer 2

好的问题。所以，首先我要强调的是，那个Polymer组件的当前JS代码实际上并不是＃34;非常聚合物＆＃34;，所以你正在以非常简单的方式与DOM进行交互。＃34;而不是使用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来电时设置一个属性。我们的目标是，我们需要使用Polymer属性进行操作，这些属性绑定到html属性，而不是直接操作DOM。所以，你的元素现在是数据驱动的。

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

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

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

或已在某个地方设置为应用程序（页面）中的全局样式。

聚合物数据变化没有反映出来

2 个答案: