Instructions pour l'utilisation des attributs dom-if et is dans le framework JS Connaissance Polymer_Basic

Nous avons souvent besoin d'un rendu de modèle basé sur la valeur d'un certain attribut, qui est l'instruction de branche la plus élémentaire. Il y a ng-if disponible dans Angular, et bien sûr il y a dom-if dans Polymer. En fait, dom-if est une chose très simple. C'est juste le point d'accès à ce sujet. Ce que je veux présenter est en fait l'attribut is.
Comme le dom-repeat introduit précédemment, dom-if est utilisé sur l'élément du modèle via l'attribut is. Par exemple, dans l'exemple suivant, deux modèles décident qui doit être rendu en fonction d'une valeur booléenne sur un contrôle lié
. Courez

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <input type="checkbox" checked="{{checked::change}}">
  <template is="dom-if" if="[[checked]]">true</template>
  <template is="dom-if" if="[[!checked]]">false</template>
 </template>
 <script>
  Polymer({
   properties: {
    checked: { value: false }
   },
   is: 'demo-test'
  });
 </script>
</dom-module>

<demo-test></demo-test>

Qu'il s'agisse de dom-if ou du dom-repeat précédent, que spécifient exactement ces attributs ? En fait, c'est la même chose qu'Angular. Ce sont deux concepts directifs, mais Polymer ne l'appelle pas Directive. Nous pouvons complètement créer une telle chose nous-mêmes. Par exemple, dans l'exemple suivant, nous ajoutons un élément is="demo-test" à l'élément div
. Courez

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<script>
 Polymer({
  is: 'demo-test',
  extends: 'div', <!-- 关键就在这里
  ready: function(e) {
   this.innerHTML = '我是一个 demo-test';
  }
 });
</script>

<div is="demo-test"></div>

Lors de la définition, spécifiez un nom de balise via extends pour obtenir une directive is. L'exemple ci-dessus est l'utilisation la plus simple. Nous pouvons créer nous-mêmes Shadow DOM et faire ce que nous voulons. En fait, les dom-repeat, dom-if et autres dom-* intégrés à Polymer sont également définis de cette manière. Mais cette chose semble très compliquée en détail, et mon article n'est qu'un article d'entrée de gamme. Si vous voulez connaître une utilisation plus spécifique, vous devriez lire le code source (je ne trouve même pas le document officiel où il est défini). .