文章出處
文章列表
除了上一篇說到的創建自定義元素方法以外，還可以通過原生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有時也可以，目前這個問題還得研究一下，后面再更新。
恭喜你看完了。
文章列表
| 不含病毒。www.avast.com |
文章標籤
全站熱搜
