Polymer 入门（二）Hello，World！

date
Sep 2, 2014
slug
polymer-2
status
Published
tags
Computer
summary
type
Post
在上一节里面，我们了解了什么是Polymer，以及需要理解的几个关键概念。在这一节里面，我们将写出一个Hello，World！

Polymer 安装

Polymer安装有很多很多方式，比如最古老的下载一个polymer的zip，然后导入到你的项目。但是现在更喜欢的是使用开源世界的一些方法，这里推荐的是Bower。
Bower是用于web前端开发的包管理器。对于前端包管理方面的问题，它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型，这样更利于使用更合适的构建工具。Bower没有系统级的依赖，在不同app之间也不互相依赖，依赖树是扁平的。
至于安装bower，这里大致的说一下：
  1. 安装Nodejs，bower依赖于Nodejs
  1. 使用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。

© 连城究 2021