Podmíněné vykreslování v Polymer 3

Potřebuji vykreslit různé html na základě boolových proměnných true nebo false. Například v reakci bych udělal něco takového při návratu ve funkci render:

{this.state.booleanValue ? "true" : "false"}

Kde dostanu dva různé výstupy v závislosti na hodnotě booleanValue.

Zkoušel jsem to v Polymeru 3 a nejprve jsem deklaroval svou boolovu proměnnou:

static get properties() {
    return {
      myBoolValue: {
        type: Boolean
      }
    };
  }

Poté se jej pokusím použít ve své šabloně/html jako

${this.myBoolValue ? "" : ""}

Kód však nerozpozná proměnnou „this.myBoolValue“ v html šabloně. Jak to? Úplný kód mé šablony:

static get template() {
    return html`
     
     <div>
        ${this.myBoolValue ? "true" : "false"}  // error, does not recognize "this.myBoolValue". 
   </div>

    `;

Odpověď

Pokud je vaše výchozí hodnota myBoolValue je false můžete změnit své vlastnosti a šablonu takto (Pokud chcete používat podmíněné šablony, musíte importovat @polymer/polymer/lib/elements/dom-if.js .)

static get properties() {
  return {
    myBoolValue: {
      type: Boolean,
      value: false
    }
  };
}
static get template() {
  return html`
    <p>[[myBoolValue]]</p>

    // OR conditional templates:
    <template is="dom-if" if="{{myBoolValue}}">
      true
    </template>
    <template is="dom-if" if="{{!myBoolValue}}">
      false
    </template>
  `;
}

Pokud nemůžete nebo nechcete nastavit výchozí hodnotu, změňte kód takto a použijte vypočítanou vlastnost:

static get properties() {
  return {
    myBoolValue: {
      type: Boolean
    },
    computedBool: {
      type: String,
      computed: "_isTrue(myBoolValue)",
      value: false
    }
  };
}

static get template() {
  return html`
    <p>[[computedBool]]</p>

    <template is="dom-if" if="{{computedBool}}">
      true
    </template>
    <template is="dom-if" if="{{!computedBool}}">
      false
    </template>
  `;
}

_isTrue(a) {
  return a === true;
}

No
No