热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了JS的框架Polymer中的dom-if和is属性使用说明,Polymer是Google开发的一款JavaScript框架,需要的朋友可以参考下

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






 
 




  无论是 dom-if 还是之前的 dom-repeat,这些 is 属性来指定的到底是什么呢?其实和 Angular 是一样的,它们都是 Directive 的概念,只是 Polymer 不称它为 Directive 而已。我们完全可以自己造一个这样的东西出来,比如下面例子我们给 div 元素添加一个 is="demo-test" 的东西
运行






 Polymer({
  is: 'demo-test',
  extends: 'div', 

  在定义时通过 extends 指定一个标签名即可得到一个 is 指令。上面例子是一个最简单的用法,我们可以自己创建 Shadow DOM 做自己想做的事了。实际上 Polymer 内置的 dom-repeat 和 dom-if 以及其他 dom-* 也都是如此定义的。但是这东西细看起来是非常复杂的,而我的文章只是入门级的东西,如果想知道更具体的用法就应该去看源码(连官方文档我也没找到在哪儿定义)。


推荐阅读
  • 当尝试更新的值与数据库中已存在的值相同时,SQL Server 是否会执行实际的更新操作?本文将通过具体示例和分析,探讨这一问题,并提供详细的解答。 ... [详细]
  • MySQL查询语句深入解析与应用实例
    本文详细介绍了MySQL查询语句的应用技巧,包括排除特定记录的高级查询方法以及UNION和UNION ALL的使用场景与性能对比。通过具体示例,帮助读者理解如何优化查询以提高数据库操作效率。 ... [详细]
  • POJ2226 二分图最小覆盖问题
    在一个大小为n×m的网格中,部分单元格为泥泞状态,其余为干净。目标是使用宽度固定为1但长度可变的木板覆盖所有泥泞单元格,且不覆盖任何干净单元格。木板允许重叠。本问题通过构建二分图并求其最小覆盖来解决。 ... [详细]
  • 探讨在使用Ant Design框架时,如何设置Sider组件以使其高度能够根据页面内容自动调整。 ... [详细]
  • HTML5 拖拽功能实现
    本文通过一个简单的示例,展示了如何利用 HTML5 的拖放 API 实现元素之间的拖拽功能。示例包括 HTML 结构、CSS 样式以及 JavaScript 逻辑,旨在帮助开发者快速理解和应用拖拽技术。 ... [详细]
  • 深入解析ASP.NET中的HttpHandler、HttpModule与IHttpHandlerFactory
    本文探讨了ASP.NET页面生命周期中的关键组件——HttpHandler、HttpModule和IHttpHandlerFactory的工作原理及其应用场景。通过实例分析,帮助读者更好地理解和利用这些组件来优化Web应用程序。 ... [详细]
  • 本文介绍了QuantLib库的基本使用方法,重点探讨了日期(Date)和日历(Calendar)类在金融计算中的作用与实现。 ... [详细]
  • 本文介绍了如何利用JavaScript实现学生信息表的动态添加和删除行功能。 ... [详细]
  • 深入解析 Android 中的 ActivityGroup 实现
    本文详细探讨了如何在 Android 应用中使用 ActivityGroup 来实现类似微博客户端主界面的效果,并分析了 TabActivity 的局限性,推荐使用更为灵活的 ActivityGroup 方案。 ... [详细]
  • 本文探讨了归并排序算法在求解逆序数问题中的应用,并对比分析了两种实现方法。第一种方法使用指针和动态数组,存在内存管理上的风险;而第二种方法通过引入临时数组简化了实现过程,提高了代码的健壮性和可读性。 ... [详细]
  • 本文探讨了在JavaScript中如何有效地从服务器控件DropDownList中获取绑定的ID值,而非仅仅是显示的文本值。这对于需要根据用户选择动态处理数据的应用场景非常有用。 ... [详细]
  • 实践指南:利用Jenkins与JMeter实现自动化测试报告通知
    本文详细介绍了如何结合Jenkins和JMeter工具,通过自定义脚本向用户发送测试报告的通知。这不仅提高了开发团队的工作效率,也确保了信息的及时传递。 ... [详细]
  • 2023年PHP处理请求超时的全面指南
    本文详细介绍了在PHP中处理请求超时的各种方法,包括设置脚本执行时间、处理file_get_contents函数超时以及优化AJAX请求等,适合开发者参考学习。 ... [详细]
  • 1.选择一个翻译页面,我选择的是有道词典(http:dict.youdao.com)2.随便输入一个英语单词进行翻译,然后查看源文件,找到 ... [详细]
  • PyQt5中进度条(QProgressBar)的使用指南
    本文介绍了如何在PyQt5中使用进度条(QProgressBar)来展示任务的完成情况。包括初始化进度条、设置其最大最小值以及更新进度的方法。 ... [详细]
author-avatar
cgy梦回秦都
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有