Polymer 入门(三)自定义元素扩展!

在上一节中,我们完成了一个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是一门函数式的语言,自然,也可以定义函数作为属性(更不用提双向绑定函数)。

Table of Contents