Question

H

我试图根据变量值隐藏/取消隐藏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方法上，我正在设置未反映的元素初始化的值。

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

在PolymerJs中，值更改未反映在html上

1 个答案: