JS フレームワークで dom-if 属性と is 属性を使用する手順 Polymer_基礎知識

特定の属性の値に基づいてテンプレートをレンダリングする必要があることがよくありますが、これは最も基本的な分岐ステートメントです。 Angular には ng-if があり、もちろん Polymer にも dom-if があります。実際、dom-if は非常に単純なもので、ここで紹介したいのは is 属性です。
前に紹介した dom-repeat と同様に、dom-if は is 属性を通じてテンプレート要素で使用されます。たとえば、次の例では、バインドされたコントロール
のブール値に基づいて、どちらをレンダリングするかを決定します。
を実行します

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

dom-if であれ、前の dom-repeat であれ、これらの属性は正確に何を指定するのでしょうか?実際、これは Angular と同じです。どちらもディレクティブの概念ですが、Polymer ではディレクティブとは呼びません。このようなものは完全に自分で作成できます。たとえば、次の例では、 is="demo-test" というものを div 要素
に追加します。
を実行します

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

定義時にextendsでタグ名を指定してisディレクティブを取得します。上記の例は最も単純な使用法であり、Shadow DOM を自分で作成して、必要な操作を行うことができます。実際、Polymer に組み込まれている dom-repeat、dom-if、その他の dom-* もこの方法で定義されています。ただし、これは詳細に見ると非常に複雑で、私の記事は入門レベルのものに過ぎません。より具体的な使い方を知りたい場合は、ソースコードを読んでください (定義されている公式ドキュメントさえ見つかりません)。 。