DDR爱好者之家

JS的框架Polymer中的dom-if和is属性使用说明
站长资源 2025/11/11 佚名
53 1538
DDR爱好者之家 Design By 杰米

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

<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，这些 is 属性来指定的到底是什么呢？其实和 Angular 是一样的，它们都是 Directive 的概念，只是 Polymer 不称它为 Directive 而已。我们完全可以自己造一个这样的东西出来，比如下面例子我们给 div 元素添加一个 is="demo-test" 的东西
运行

<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-* 也都是如此定义的。但是这东西细看起来是非常复杂的，而我的文章只是入门级的东西，如果想知道更具体的用法就应该去看源码（连官方文档我也没找到在哪儿定义）。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米