JS的框架Polymer中的dom-if和is属性使用说明

时间:2021-05-26

我们经常会有根据某个属性的取值来觉得模板渲染的需求,那就是最基本的分支语句。Angular 中有 ng-if 可以用,那么 Polymer 中当然也有 dom-if。其实 dom-if 是个很简单的东西,它只是作为本篇话题的接入点,我想介绍的实际上是 is 这个属性。
  dom-if 和之前介绍过的 dom-repeat 一样,都是通过 is 属性在 tempalte 元素上使用的,比如下面这个例子就是两个模板根据一个绑定才控件上的布尔值来决定谁该被渲染
运行

<script> var Polymer = { dom: 'shadow' }; </script><base href="http:///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-* 也都是如此定义的。但是这东西细看起来是非常复杂的,而我的文章只是入门级的东西,如果想知道更具体的用法就应该去看源码(连官方文档我也没找到在哪儿定义)。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章