除了上一篇说到的创建自定义元素方法以外,还可以通过原生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)——自定义元素的更多相关文章

  1. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  2. 前端组件化Polymer入门教程(3)——快速入门

    本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...

  3. 前端组件化Polymer入门教程(5)——生命周期

    以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...

  4. 前端组件化Polymer入门教程(2)——Hello world

    本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...

  5. 前端组件化Polymer入门教程(8)——事件

    可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...

  6. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  7. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  8. 前端组件化Polymer深入篇(1)

    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...

  9. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

随机推荐

  1. GIS数据下载

    WorldTile.hdf wuhan.hdf ... openstreetmap GIS空间数据库 分割存储. 检索效率有没有提高? 云地理服务:旅游,遥感数据处理,气温,地质,房价,人口,生活(商 ...

  2. Forward团队-爬虫豆瓣top250项目-需求分析

    一. 需求:1.爬取豆瓣电影top250. 2.获取电影名称,排名,分数,简介,导演,演员. 3.将爬取到的数据保存,以便随时查看. 3.可以将获取到的数据展示给用户. 二. 参考: 豆瓣api参考资 ...

  3. POJ3255-Roadblocks(最短路)

    Description Bessie has moved to a small farm and sometimes enjoys returning to visit one of her best ...

  4. noip第20课作业

    1. 评学习小标兵 [问题描述] 东东所在的班级有 N 名同学,期末考试进行了数学.语文.英语.地理四门功课的测试.班主任要将这 N 名学生中总分前三名定为本学期的“学习小标兵”.现在给出这N 名学生 ...

  5. Java相关工具下载、配置环境变量

    相关工具下载 JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html Eclip ...

  6. xml文件头文件生成策略以及导入约束条件

    约束的作用是对配置文件的一种检验 约束条件分为schema约束和DTD约束,schema约束是还有目录结构,DTD约束没有目录结构 这里暂先介绍schema约束的导入 约束的分类: 1.schema ...

  7. AngularJS 启动执行过程

    一.浏览器下载HTML/CSS/JavaScript等 当你转到一个页面地址后,浏览器先回下载这个HTML,同时,会开启一些辅助线程下载所关联的script标签和link标签里引用的文件. 二.浏览器 ...

  8. Android-okhttp

    在AndroidManifest.xml配置网络访问权限: <!-- 访问网络是危险的行为 所以需要权限 --> <uses-permission android:name=&quo ...

  9. nginx 执行理解

    nginx是一个代理(apache)或者自己处理 location ~ \.php { try_files $uri =404; fastcgi_pass unix:/tmp/php-cgi.sock ...

  10. wpf根据X与Y轴获取内部值

    效果图: 环境 Visual Studio ,.Net Framework 4.0 SDK 支持Windows XP,Windows Win7.. 实现方法: 创建ListBox设置ListBox.I ...