前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外，还可以通过原生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有时也可以，目前这个问题还得研究一下，后面再更新。
恭喜你看完了。
前端组件化Polymer入门教程(4)——自定义元素的更多相关文章
- 前端组件化Polymer入门教程(1)——初识&&安装
前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...
- 前端组件化Polymer入门教程(3)——快速入门
本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...
- 前端组件化Polymer入门教程(5)——生命周期
以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...
- 前端组件化Polymer入门教程(2)——Hello world
本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...
- 前端组件化Polymer入门教程(8)——事件
可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...
- 前端组件化Polymer入门教程(7)——Local DOM
DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...
- 前端组件化Polymer入门教程(6)——监听属性值变化
监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...
- 前端组件化Polymer深入篇(1)
在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
随机推荐
- jvm的内存分配
java内存分配 A:栈 存储局部变量 B:堆 存储所有new出来的 C:方法区(方法区的内存中) 类加载时 方法信息保存在一块称为方法区的内存中, 并不随你创建对象而随对象保存于堆中; D:本地方法 ...
- 20155326刘美岑 2016-2017-2 《Java程序设计》第二周学习总结
20155326刘美岑 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 教材第三章主要讲解的是基础语法,主要包括认识类型与变量.学习运算符的基本使用.了解类型 ...
- XA: 事务和两阶段提交
本文原文连接:http://blog.csdn.net/bluishglc/article/details/7612811 ,转载请注明出处! 1.XA XA是由X/Open组织提出的两阶段提交协议, ...
- 第75讲：模式匹配下的For循环
今天学习了模式匹配下的for循环内容.让我们从代码实战角度出发. for(i<-List(1,2,3,4,5)) println(i)//实际上调用的是foreach for(in ...
- js-图片轮播
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- Effective C++ 第二版 31)局部对象引用和函数内new的指针 32)推迟变量定义
条款31 千万不要返回局部对象的引用, 不要返回函数内部用new初始化的指针的引用 第一种情况: 返回局部对象的引用; 局部对象--仅仅是局部的, 在定义时创建, 在离开生命空间时被销毁; 所谓生命空 ...
- 1.buntu 安装redis
方式一 :apt安装 在 Ubuntu 系统安装 Redi 可以使用以下命令: $sudo apt-get update $sudo apt-get install redis-server 启动 R ...
- vue项目webpack中Npm传递参数配置不同域名接口
项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...
- SecureCrt使用SSH2登陆海康相机
海康相机登陆SSH2: 1.安装SecureCRT2.登陆到相机,系统-安全管理-安全服务,勾选启用SSh3,打开SecureCRT,快速链接4.选择协议SSh2,主机Ip填入相机IP,端口默认22, ...
- 基于tkinter的九型人格测试系统介绍
基于tkinter的九型人格测试系统介绍 一.程序代码地址,GitHub 二.程序介绍 1.login.py 登录界面: 注册界面: 2.mainWindow.py 登录成功之后的界面: 3.doTe ...