在 Polymer Js 中，值变化不反映在 html 上答案

【问题标题】：In PolymerJs, value change not reflecting on html在 Polymer Js 中，值变化不反映在 html 上
【发布时间】：2019-01-27 11:46:46
【问题描述】：

我试图根据变量值隐藏/取消隐藏 div。下面是我的代码。

  <div id="content" hidden$="{{ _hideDiv( myValue ) }}"></div>

  <paper-icon-button id="button" on-tap="_myValue" icon="create" hidden$="{{ _hideButtons( myValue, readonly ) }}">
  </paper-icon-button>

  <paper-input id="input" value="{{ value }}" hidden$="{{ _hideButtons( myValue, readonly ) }}">
  </paper-input>

通过使用myValue 属性，我试图隐藏/取消隐藏 div 和按钮。但是每当我更改 myValue 时，它都不会反映在 html 上。

在 console.log 中我可以看到更改后的新值，但在 html 中我看不到更改。有人可以帮助我，我不知道为什么它没有反映？

  onInit( value ) {
    if ( someCondition i check here ) {
      this.set( 'myValue', false );   // THIS CHANGE NOT REFLECTING
    } else {
      this.set( 'myValue', true );  // THIS CHANGE NOT REFLECTING
    }
  }

  _dataChanged( data ) {
    this.onInit( data );
    this.set( 'myValue', false );
  }

  _myValue() {
    this.set( 'myValue', !this.myValue );
  }

  _hideButtons( isActive, readonly ) {
    return myVal === true && readonly === false;
   // myVal is not defined !! Is it this.myValue or isActive ?
  }

  _hideDiv( myVal ) {
    return myVal === false;
  }

_myValue 方法更改反映但在 onInit 方法上我正在设置未反映的元素初始化值。

【问题讨论】：

一切看起来都很好。这是一个正确的方法，我看不出有什么问题。因此，问题将出在您正确发布的代码之外的其他地方。您使用的是聚合物版本 1 还是 2？您指定了有问题的两个标签......是否调用了 _hideDiv 函数？ myVal 调用时的值是多少。如果它是字符串类型，那么 myVal === false 将始终为 false。
使用polymer2，myVal为布尔型。

标签： javascript polymer polymer-1.0 polymer-2.x

【解决方案1】：

我试图在 Codepen 上说明您的代码：它按应有的方式工作。您有一些语法错误。下面Run Code Snipped 将演示您的示例，或者，我将尝试通过自己的修改使其更紧凑： DEMO

HTMLImports.whenReady(() => {
  
class XFoo extends Polymer.Element {
      static get is() { return 'x-foo'; }
      static get properties() { return {
        myValue:{
          type:Boolean,
          value:false
        },
        readonly:{
          type:Boolean,
          value:false
        }} }

onInit( value ) {
    if ( this.myValue ) {
      this.set( 'myValue', false );   // THIS CHANGE NOT REFLECTING
    } else {
      this.set( 'myValue', true );  // THIS CHANGE NOT REFLECTING
    }
  }

  _dataChanged( data ) {
    this.onInit( data );
    this.set( 'myValue', false );
  }

  _myValue() {
    this.set( 'myValue', !this.myValue );
    console.log(this.myValue)
  }

  _hideButtons( isActive, readonly ) {
    console.log(isActive, readonly )
    return isActive=== true && readonly === false;
  }

  _hideDiv( myVal ) {
    return myVal === false;
  }
     

 }
customElements.define(XFoo.is, XFoo);
   
});

<head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-input/paper-input.html">
  
</head>

<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>

</style>
  <div id="content" hidden$="{{ _hideDiv( myValue ) }}">Div Element</div>

  <paper-icon-button id="button" on-tap="_myValue" icon="create" hidden$="{{ _hideButtons( myValue, readonly ) }}">
  </paper-icon-button>

  <paper-input id="input" value="{{ value }}" hidden$="{{ _hideButtons( myValue, readonly ) }}">
  </paper-input>
  <br><br><br><br><br><br>
  <paper-button on-tap='_myValue' rised style="background-color:blue; color:white">Hide/Show<Paper-button>
</template>
  </dom-module>
</body>

【讨论】：