Polymer 入门(二)Hello,World!

在上一节里面,我们了解了什么是Polymer,以及需要理解的几个关键概念。在这一节里面,我们将写出一个Hello,World!

Polymer 安装

Polymer安装有很多很多方式,比如最古老的下载一个polymer的zip,然后导入到你的项目。但是现在更喜欢的是使用开源世界的一些方法,这里推荐的是Bower。

Bower是用于web前端开发的包管理器。对于前端包管理方面的问题,它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型,这样更利于使用更合适的构建工具。Bower没有系统级的依赖,在不同app之间也不互相依赖,依赖树是扁平的。

至于安装bower,这里大致的说一下:

  1. 安装Nodejs,bower依赖于Nodejs
  2. 使用Nodejs包管理器npm安装Bower

具体的可以查看bower的中文主页

安装的时候很简单,只需要这个命令

bower install --save Polymer/polymer

创建自定义元素

我们新建一个html在根目录下,为my-element.html.
在这个文件里,我们就会创建我们自己的自定义元素。
首先,需要引入Polymer的核心文件(polymer.html)

<link rel="import" href="bower_components/polymer/polymer.html">

下一步就是声明我们的自定义元素了

<polymer-element name="my-element">
  <template>
  	<style> b { color: red; } </style>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
  </template>
  <script>
  	Polymer('my-element');
  </script>
</polymer-element>

需要注意的是,polymer-element包裹住了自定义元素,它的name属性(attribute)即为我们自定义元素的名字。

自定义元素一共有2部分,第一部分是template包裹的,它包含了自定义元素的View,在里面你可以创建里面的Dom结构,也可以为你的Dom结构增加样式,样式使用style标签,或者link引入css。

而另外一部分是可以理解Model,即控制上面Dom的逻辑。在这个简单的元素里,我们只做了使用Polymer()方法初始化元素。注意,任何自定义元素都需要初始化之后才可以使用,如果你的自定义元素很简单,不需要这样显式的初始化,你可以给polymer-element添加一个noscript属性,这样Polymer会自动帮你初始化。

使用自定义元素

在使用自定义元素之前,我们需要先加载platform.js,因为绝大多是浏览器还没有实现Web components APIs,而platform.js可以帮助其实现。

其次,自然我们就需要通过HTML Import加载我们自己的element了。

<!-- 保存为index.html !-->
<!DOCTYPE html>
<html>
  <head>
    <!-- 1. 加载 platform.js 以提供 polyfill 支持. -->
    <script src="bower_components/platform/platform.js"></script>

    <!-- 2. 使用一个 HTML Import 将 element 导入 -->
    <link rel="import"
          href="my-element.html">
  </head>
  <body>
	<my-element></my-element>
  </body>
</html>

具体的demo这里不再演示,这是一个最简单的Hello,World。在接下来的内容里,我将会深入的探讨如何自定义元素。

填充content

目前我们所自定义的元素,在调用的时候,都是<my-element></my-element>,只是使用了标签名,而没有设置属性,或者填充内容.

自然,我们的element也是支持填充内容的。这个时候要使用content标签。将之前的代码改成如下:

<polymer-element name="my-element">
  <template>
  	<style> b { color: red; } </style>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
    <content></content>
  </template>
  <script>
  	Polymer('my-element');
  </script>
</polymer-element>

这样,我们就可以自由的在标签之间填充我们需要的dom元素。

那如果我们想对填充的内容进行选择如何?可以设置content的select属性,例如:

<content select="img"></content>

这个时候我们填充的img标签就会匹配到这个content。

Table of Contents