web-dev-qa-db-fra.com

L'utilisation de <template is = "dom-if" avec une condition

J'ai un <template is="dom-if" if=... que je veux utiliser avec une condition logique.

Toute liaison que j'essaie semble être véridique:

<link href="https://polygit.org/components/polymer/polymer.html" rel="import">

<dom-module id="test-thing">
  <template>
    <template is="dom-if" if="{{title == 'foo'}}" restamp>
      Title is <b>FOO</b>
    </template>
    <template is="dom-if" if="{{title}} == 'bar'" restamp>
      Title is <b>BAR</b>
    </template>
    
    Actual: "{{title}}"
  </template>
  <script>
    Polymer({
      is: 'test-thing',
      properties: {
        title: {type: String,value:''}
      }
    });
  </script>
</dom-module>

<div>
  Title: foo<br>
  <test-thing title="foo"></test-thing>
</div>
<div>
  Title: bar<br>
  <test-thing title="bar"></test-thing>
</div>
<div>
  Title: abc<br>
  <test-thing title="abc"></test-thing>
</div>

Quelle est la bonne façon d'appliquer une condition if à une dom-iftemplate?

polymerpolymer-1.0dom-if
7
Keith

vous devez définir votre fonction.

<template is="dom-if" if="[[_isEqualTo(title, 'Foo')]]">

puis dans le script:

function _isEqualTo(title, string) {
  return title == string;
}

chaque fois que la propriété title est modifiée, la fonction _isEqualTo est appelé. vous n'avez donc pas à vous soucier de l'observation des biens ou de quelque chose.

fonction _isEqualTo est appelé avec 2 paramètres, le second est simplement une chaîne simple avec laquelle vous voulez comparer une valeur.

16
Kuba Šimonovský

La seule logique que vous pouvez utiliser dans une liaison ne l'est pas. par exemple:

<template is="dom-if" if="{{_isEqualTo(title, 'Foo')}}">
<template is="dom-if" if="{{!_isEqualTo(title, 'Foo')}}">
3
Pascal L.

Si vos données étaient telles que Foo était booléen ou avait un attribut "Foo": true ou "isFoo": true. Ensuite, vous pouvez simplement faire:

<template is="dom-if" if="{{isFoo}}">
   Foo
</template>
1
Scott Romack