Skip to content

Latest commit

 

History

History
274 lines (234 loc) · 5.83 KB

2015-02-22-polymer体验.md

File metadata and controls

274 lines (234 loc) · 5.83 KB
Raw
layout date title tag
post
2015-02-22 23:25:43 +0800
上手 polymer
webponent
polymer

先把代码粘出来。

<!DOCTYPE html>
<html>
<head>
<script src="../polymer-tutorial-master/components/polymer/polymer.js"></script>
</head>

<body>
<!--demo1-->
<!--如果没有 <script>Polymer()</script> 不行的-->
<!--在polymer-elemnet上设置的其他 attribute 将会自动添加到元素实例上。例如：-->
<!--如果没有 js 构造函数,noscript 是必须的-->
<polymer-element name="x-element_1" noscript a="1" b="2">
	<template>
		<p>Hello World</p>
	</template>
</polymer-element>

<x-element_1></x-element_1>


<!--demo2-->
<polymer-element name="x-element_2">
	<!--可以没有 template-->
	<!--<template>-->
	<!--</template>-->
	<script>
		Polymer('x-element_2',{

			message: "Hello",
			get greeting() {
				return this.message;
			},
			getGreet: function() {
				return this.message;
			},
			foo: function() {
				console.log("getter",this.greeting);
				console.log("function",this.getGreet());
			},
			ready: function(){
				this.foo();
			}
		})
	</script>
</polymer-element>
<x-element_2></x-element_2>


<!--demo3-->
<polymer-element name="app-globals">
	<script>
//		(function() {
//			var firstName = 'John';
//			var lastName = 'Smith';
//
//			Polymer('app-globals', {
//				ready: function() {
//					this.firstName = firstName;
//					this.lastName = lastName;
//				}
//			});
//		})();


	(function(){
		// 可以在外面通过`属性`配置全局变量
		var values = {};

		Polymer('app-globals',{
			ready: function() {
				for (var i = 0; i < this.attributes.length; ++i) {
					var attr = this.attributes[i];
					console.log('--',attr.nodeName,attr.value)
					values[attr.nodeName] = attr.value;
				}
			}

		});
	}());
	</script>
</polymer-element>

<polymer-element name="x-element_3">
	<template>
		<app-globals id="globalApp" firstName2="Addy" lastName="Osmani"></app-globals>
		<div id="firstname"></div>
		<div id="lastname"></div>
	</template>
	<script>
		Polymer('x-element_3', {
			ready: function() {
				this.globals = this.$.globalApp;
				console.dir(this.globals.getAttribute('firstName2'));
			}
		});
	</script>
</polymer-element>

<x-element_3></x-element_3>



<!--demo4-->

<polymer-element name="x-element_4">
	<script>
		Polymer('x-element_4',{
			ready: function() {
				console.log('ready','可能还包括图片,样式等外链加载,加载完毕');
			},
			created: function(){
				console.log('created','一个元素的实例被创建');
			},
			attached: function() {

				console.log('attached','当一个元素的实例被插入到DOM中');
			},
			domReady: function() {
				console.log('domReady');
			},
			detached: function() {
				console.log('detached','当实例从DOM中移除');
			},
			attributeChanged: function() {
				console.log('attributeChanged',attrName, 'old: ' + oldVal, 'new:', newVal);
			}
		})
	</script>
</polymer-element>
<x-element_4></x-element_4>

<!--
	attributes="foo bar baz" 元素实例显示为 undefined,语句表示设置三个元素实例对象,
	可作为 html标签 x-element_5 的属性使用,默认情况是由标签像实例内部传值, 在设置对象的
	reflect 可实现对象的property 与 标签attribute值的双向绑定
-->
<polymer-element name="x-element_5" attributes="foo bar baz" lorem="abc">
	<template><p>5</p></template>
<script>
	Polymer('x-element_5',{
		ready:function(){
			console.log(this.foo);

			var e = document.querySelector("x-element_5");
			console.log(e.foo, e.bar, e.privateMethod);
			this.baz = "changed,double bind"
			console.dir(e);

		},
		privateMethod: function() {
			// 挂载在 prototype 对象上
		},
		publish:{
			foo: 'I am foo!',
			bar: {
				x: 1,
				y: 2,
				z: {
					zIndex: "100",
					arr: [1,2,3,4,5]
				}
			},
			baz: {
				value: false,
				reflect: false  // 双向绑定
			},
			publicMethod: function(){
				// 挂载在元素实例上
			}
		}
	});
</script>
</polymer-element>
<x-element_5 foo="I am not foo!"></x-element_5>
<x-element_5 foo="I am a coder" baz="true"></x-element_5>



<!--
	demo 6
	template
	双向数据绑定 observe
-->
<polymer-element name="greeting-tag">
	<!-- 最外面的 template 定义了 element 的 shadow DOM -->
	<template>
		<ul>

			<span> 这里会根据下面的 input 而变化：{{ ngModel }}</span><br>
			<input type="text"  value="{{ngModel}}" placeholder="体验双向绑定">



			<template repeat="{{s in salutations}}">
				<li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
			</template>
			<button on-click="{{updateModel}}">Update model</button>
		</ul>
	</template>
	<script>
		Polymer('greeting-tag', {
			ngModel: '',

			// 观察者, 数据有变化会触发
			observe: {
				ngModel: 'onChangeCallback'
			},
			ready: function() {
				// 植入 element 的数据模型 (数组 salutations)
				this.salutations = [
					{what: 'Hello', who: 'World'},
					{what: 'GoodBye', who: 'DOM APIs'},
					{what: 'Hello', who: 'Declarative'},
					{what: 'GoodBye', who: 'Imperative'}
				];
			},
			updateModel: function(){
//				console.log();
				//this.salutations.reverse();
			},
			onChangeCallback: function(a,b){
				console.log(a,b);
			}
		});
	</script>
</polymer-element>

<greeting-tag></greeting-tag>




<!--
	demo 7
	事件触发
	http://docs.polymerchina.org/docs/polymer/polymer.html#declarative-event-mapping
-->

<polymer-element name="ouch-button">
	<template>
		<button on-click="{{onClick}}">伤自尊</button>
	</template>
	<script>
		Polymer('ouch-button', {
			onClick: function() {
				// fire(inType, inDetail, inToNode)
				//	触发外部的事件
				this.fire('ouch', {msg: '又伤自尊了！'});
			}
		});
	</script>
</polymer-element>

<ouch-button></ouch-button>

<script>
	document.querySelector('ouch-button').addEventListener('ouch', function(e) {
		console.log(e.type, e.detail.msg); // "嗷" "又伤自尊了！"
	});
</script>
</body>
</html>