特定の属性の値に基づいてテンプレートをレンダリングする必要があることがよくありますが、これは最も基本的な分岐ステートメントです。 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-* もこの方法で定義されています。ただし、これは詳細に見ると非常に複雑で、私の記事は入門レベルのものに過ぎません。より具体的な使い方を知りたい場合は、ソースコードを読んでください (定義されている公式ドキュメントさえ見つかりません)。 。