В PolymerJs изменение значения не отражается в html - PullRequest
Новая
       25

В PolymerJs изменение значения не отражается в html

0 голосов
/ 22 января 2019

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 я устанавливаю значение при инициализации элемента, которое не отражает.

1 Ответ

0 голосов
/ 22 января 2019

Я попытался проиллюстрировать ваш код в 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>
...