Polymer 入门（三）自定义元素扩展！

date
Sep 4, 2014
slug
polymer-3
status
Published
tags
Computer
summary
type
Post
在上一节中，我们完成了一个hello，world。这一节，我们将对其进行扩展，同时引入一些Polymer的高级特性（当然，这里木有高深内容）。

Element Attributes

我们在上一节，已经接触到了自定义元素的2个属性：element-name与noscript。前者用于声明元素的名字，而后者用于隐式的声明。这里，我将介绍第三个用的比较多的属性：attributes。
attributes用于声明element的public properties，这些属性在后期使用element的时候会被赋值。下面是一个简单的例子。
<polymer-element name="my-element" attributes="name saying" noscript>
	<template>
    	<p>my name is {{name}}, and I'm saying {{saying}}</p>
    </template>
</polymer-element>
具体使用的时候：
<my-element name="lcj" saying="hello, world!"><my-element>
在这个例子中，我们还使用到了最基础的双向绑定。
element的另外一个特性就是，你使用的任何attribute都会在最后的dom上体现，比如：
<polymer-element name="my-element" class="class_name"><polymer-elemet>
这一个特性可以很好的用于组件的管理以及layout控制。

Public Properties

上一个小节我们提到了，element可以使用attributes添加public properties，这些公开属性可以在使用的时候被赋值。除了这种方法，也可以在注册元素的时候，添加公开属性。
例如：
Polymer('my-element', {
  message: 'Hello',
  created: function() {
    this.list = [];
    this.person = {};
  }
});
上面代码中的message，与list，person，均可以看做这个自定义元素的API，都可以在dom中使用{{}}来进行双向绑定。值得注意的是，如果是数组或者对象，那么需要在created回调中初始化。
created函数，在这个element实例被创建时调用，具体可以查询Polymer生命周期
js是一门函数式的语言，自然，也可以定义函数作为属性（更不用提双向绑定函数）。

© 连城究 2021