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; }