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

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 個解決方案

解決方案1
1 2019-01-22 11:57:20

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

問題描述

1 個解決方案

解決方案1 1 2019-01-22 11:57:20

解決方案1
1 2019-01-22 11:57:20