代码之家 › 专栏 › 技术社区 › lte__

聚合物数据变化不能反映

polymer-1.0 polymer node.js html

lte__ · 技术社区 · 6 年前

我试着用一个按钮在聚合物中隐藏/取消隐藏一个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卡 通过更改 hide 变量?

2 回复 | 直到 6 年前

Andrew Ymaz 6 年前

好问题。所以,首先我要强调的是,当前那个聚合物组件的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>

你看,代码现在看起来有多干净?我们只是在每个 HITEXXCARD 打电话。我们的目标是,我们需要使用绑定到html属性的聚合物属性进行操作,而不是直接操作dom。所以,您的元素现在是数据驱动的。

另外,我假设存在一些css代码来隐藏 [hidden] 元素上存在属性。

可以在里面做 px-card 元素通过:

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

或者在应用程序(页面)中设置为全局样式。

Kate Jeffreys 6 年前

也许是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 选择器。