聚合物数据变化不反映 [英] Polymer data change doesn't reflect

问题描述

我试图用聚合物中的按钮隐藏/取消隐藏UI元素，但它不起作用。我有按钮和元素：

 < button id =runPredictionButton> 
< i>按钮文字< / i> 
< / button> 
< px-card 
 hidden $ ={{hide}}> 
 //...content here 
< / px-card> 
< div class =output>< / div> 
  

我也定义了属性和事件侦听器：

 < script> 
 Polymer（{
是：'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）; 
} 
 else {
 filerootdiv.querySelector（'。output'）。innerHTML ='Is false'; 
 this .hide = false 
 console.log（这个隐藏应该是false：+ this.hide）; 
} 
}）; 
} 
}）; 
< / script> 
  

我确定 some_conditon 有效，因为 .output 元素的内容确实会改变，但是 px-card 元素根本不会被隐藏/取消隐藏。此外，在控制台上，我可以看到 this.hide 已被更改为所需的值，但元素保持隐藏，无论如何。有什么我需要做的/自动强制内容更新？为什么这不起作用？我如何确保通过更改隐藏变量来隐藏 px-card 元素？

解决方案

好的问题。因此，首先我要强调的是，该Polymer组件的当前JS代码实际上并不是非常聚合的，所以您以非常jQuery方式与DOM进行交互，而不是使用Polymer库的所有优点。

我会建议重写那段代码：

 <按钮on-tap =hidePxCard> 
< i>按钮文字< / i> 
< / button> 
< px-card 
 hidden $ =[[hide]]> 
<！ -  ...此处的内容 - > 
< / px-card> 
< div class =output>< / div> 
  

所以，我们在这里添加了1）点击事件hander hidePxCard 2）通过方括号从双向标记转换为单向 [[hide]] ，因此没有理由使用双向绑定。

然后，让我们调整js部分：

 <脚本> 
 Polymer（{
是：'custom-view'，
 properties：{
 hide：{
 type：Boolean，
 value：false 
 
 
 hidePxCard：function（）{
 this.set（'hide'，！this.hide）; 
} 
}）; 
< / script> 
  

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

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

它可以在 px-card 元素via：

 < style> 
：主机{
 display：block; 
} 
：host [hidden] {
 display：none; 
} 
< / style> 
  

或者在整个应用程序（页面）的全局风格中设置。

I'm trying to hide/unhide a UI element with a button in Polymer, but it doesn't work. I have the button and the element:

<button id="runPredictionButton">
    <i>Button text</i>
</button>
<px-card 
hidden$="{{hide}}">    
//...content here
</px-card>
<div class="output"></div>          

And I defined the property and the event listener, too:

  <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>

I'm sure some_conditon works, because the content of the .output element does change, however the px-card element does not get hidden/unhidden at all. Also, on the console I can see that this.hide HAS been changed to the required value, but the element stays hidden no matter what. Is there something I need to do/automatically force the content to update? Why does this not work? How can I make sure to hide the px-card element by changing the hide variable?

解决方案

good question. So, first of all I would like to highlight, that current JS code of that Polymer component it's not actually "very Polymer", so you are interacting with DOM in very "jQuery way", instead of use all the benefits of Polymer library.

How I would suggest to rewrite that code:

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

So, here we've added 1) on-tap event hander hidePxCard 2) switched from two-way biding to one-way for [[hide]] via square brackets, so, there is no reason to use two-way binding.

Then, let's adjust js part:

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

Could you see, how clean code looks now? We just setup one property on every hidePxCard call. Our goal is, that we need to manipulate with Polymer properties, which bind to html attributes, and not manipulate DOM directly. So, your element is data driven now.

Also, I'm assuming that there is some CSS code is present to hide something when [hidden] attribute is present on the element.

It could be done inside px-card element via:

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

or been setup in somewhere as global style across the app (page).

这篇关于聚合物数据变化不反映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！