前端组件化Polymer入门教程(4)——自定义元素
2016-09-29 17:05
344 查看
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式。
template.html
<link rel="import" href="../polymer-1.7.0/polymer.html"> <script> MyElement = Polymer({ is: 'my-element', created: function() { this.textContent = 'My element!'; } }); var el1 = document.createElement('my-element'); var el2 = new MyElement(); document.getElementById('box').appendChild(el2); </script>
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 这是一个基础版的兼容库 --> <script src="webcomponents-lite.min.js"></script> <!-- 将rel修改为import可以引入另外一个HTML,它将会被执行 --> <link rel="import" href="./template/template.html"> </head> <body> <div id="box"></div> </body> </html>
created: function() { ``this.textContent = 'My element!'; }
当创建这个元素的时候,created会被执行,关于更多这方面的信息我们会在生命周期篇详细说明。
var el1 = document.createElement('my-element'); var el2 = new MyElement(); var el3 = new MyElement(); document.getElementById('box').appendChild(el2); document.getElementById('box').appendChild(el3);
用new创建MyElement实例,createElement只是创建并不会被添加
如果在实例化的时候你想传递参数可以通过添加一个factoryImpl方法。
<script> MyElement = Polymer({ is: 'my-element', factoryImpl: function(foo, bar) { this.textContent = 'Hello num is ' + foo + ' you ' + bar; } }); var e = document.createElement('my-element'); var el = new MyElement(42, 'octopus'); document.getElementById('box').appendChild(el); </script>
当MyElement被实例化的时候factoryImpl会接受这些参数,并且执行。另外如果你想自定义方法,可以这样。
<script> MyElement = Polymer({ is: 'my-element', factoryImpl: function(foo, bar) { this.textContent = 'Hello num is ' + foo + ' you ' + bar; foo===42&&this.msg(); }, msg:function(){ alert('你好!'); } }); var e = document.createElement('my-element'); var el = new MyElement(42, 'octopus'); document.getElementById('box').appendChild(el); </script>
默认情况下msg是不会执行的,需要我们手动调用。
扩展原生HTML元素
template.html
<script> Polymer({ is: 'my-input', extends: 'input', created: function() { this.style.border = '1px solid red'; } }); </script>
extends需要扩展的元素,created被创建的时候,通过js的createElement创建或者HTML添加都会执行这个方法。
index.html
<input is="my-input"> <input type="text">
在需要被扩展的元素上添加一个is属性。
以上是直接通过HTML的方式添加的,如果需要通过js来操作可以通过下面的方法。
template.html
<script> MyInput = Polymer({ is: 'my-input', extends: 'input', created: function() { this.style.border = '1px solid red'; } }); var el1 = document.createElement('input','my-input'); document.body.appendChild(el1); </script>
注意:目前只支持扩展input或button,其他元素或许以后会支持。
如果你想在页面加载完毕以后再执行可以这样写。
template.html
<link rel="import" href="../polymer-1.7.0/polymer.html"> <dom-module id="main-document-element"> <template> <p> Hi! I'm a Polymer element that was defined in the main document! </p> </template> </dom-module>
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 这是一个基础版的兼容库 --> <script src="webcomponents-lite.min.js"></script> <!-- 将rel修改为import可以引入另外一个HTML,它将会被执行 --> <link rel="import" href="./template/template.html"> </head> <body> <main-document-element></main-document-element> <script> HTMLImports.whenReady(function () { console.log(1); Polymer({ is: 'main-document-element' }); }); console.log(0); </script> </body> </html>
当文档中的所有输入都已完成加载时才会调用HTMLImports.whenReady函数。
整篇文章下来,发现创建元素时没有用new有时也可以,目前这个问题还得研究一下,后面再更新。
恭喜你看完了。
相关文章推荐
- React Native 之 Flex
- [置顶] [HyBrid]HyBrid混编初尝:原生和第三方JsBridge的使用
- javascript_DOM相关知识汇总
- jsp九大内置对象
- 批量勾选
- css设置垂直居中
- React Native开发重的坑
- Node.js VM模块
- 七种css方式让一个容器水平垂直居中
- JSP页面请求处理过程
- 51node1439 互质对(容斥原理)
- js中的call函数
- 这些年项目中用过的jQuery插件
- js第一课三目运算符和if ..else if..else区别
- JS跳转到顶部的方法
- CKEditor编辑器使用方式小结
- JSP显示当前系统时间的四种方式
- Rreact Native 常见错误总结
- css解析原理
- 什么是deferred对象