Polymer——Template

Polymer Template

一、Ta的简介

template是polymer element中一个重要的组成部分，主要有两种使用目的，一是构建Shadow Dom，二是用于数据绑定和视图渲染。

1、可以在template里面放置css、html代码，<template>标签外的，html标记不会被渲染出来。

在这里通过link方式引入的css文件，会被放到<style shim-shadowdom-css>标签里面，简单说来就是，不区分外联，内联，都按内联处理，这个标签在head中。

样式表的前面，会被Polymer自动加上一个标记限定，如定义 .color{} 会变为 tag-name .color{}

可以通过，no-shim属性来告诉Polymer不要填充这个Style中的类容。这里对此样式不做详细介绍，放到下一篇中。

2、Javascript代码通常位于<template>标记外部，用于注册element，以及相应的逻辑处理。

形如：

（function(){

/***当拥有多个实例时，这里代码只会执行一次，可以创建私有、静态方法，缓存变量***/

Polymer(“tag-name”,{

/***每个实例创建时都会调用***/

});

})();

注意：Polymer的第二个参数会作为本标记的原型对象，故建议不要直接定义object，array类型的变量，而应该通过this关键字来指定，以避免多实例时引起非预期的效果。

template中的代码会被添加到shadow dom中，但是由template渲染出来的代码，貌似并不在shadow dom中（官方宣称在里面）。

二、常用属性

  bind

可以通过bind来为模板绑定数据源bind={{obj}}，模版内可以直接访问，obj中的属性可以直接访问（作用域绑定），模板默认是可以访问本element实例对象的属性的。

  if

可以通过这个属性来指定模板按照指定的条件来渲染，if=“{{isShow}}”，如果siShow为false，那么模本将不被渲染，也就是里面的内容不会添加到dom树上

  repeat

这个功能几乎在模板系统不可或缺，通常用法为，List=Array|Object repeat=“{{item,index in List}}”

如果是Array是可以直接使用值的如{{item}}，就输出数组中的元素，简单数组无需使用键值对，构建对象。如，[1,2,3]，不用 写成 [{key:1},{key:2},{key:3}]

  自动节点查找

      你可以直接通过 this.$.id，这样的方式来便捷的查找节点，不用使用documnet.getElementById()/document.querySelector()来查询节点，相对效率很高。

会不会觉得这个功能很爽，的确，但是情况并不总非如此，当我们进行多级模板嵌套时，你会发现，你只能访问到本模板下的对应元素ID，

像这样的场景，

<template>

<div id="tag-box">

<template if="{{isShow}}"><polymer-tag id="tag"></polymer-tag></template>

</div>

</template>

（1、你无法通过$访问到#tag，也就意味着，在模板没有渲染完之前你无法访问到元素，domReday之后可以通过document.querySelector()来完成选取。

如：var tag=this.$["tag-box"].querySelector("#tag"); 这事通过tag.$可以访问到tag内部的元素Id。

（2、另一种方法，是不使用嵌套，而使用JS动态插入节点的方式，但是polymer对于后续插入模板中的节点，即使包含ID，也不会添加到$对象里面。

（3、还有一种方法，也不使用嵌套，

<template>

<polymer-tag id="tag" render=“bool”></polymer-tag>//这个标记不一定存在

</template>

这样可以直接访问元素，如果不需要，可以使用render来指定，不渲染element内的模板，render为自定义属性。同时从文档中应当删除<polymer-tag>节点。

这种方式的效率相对低一些，但是访问便捷。

三、模板 Special

1、部分元素中不能使用<template>标签，如<select> 和 <table>。可以使用模板属性来完成相应的操作

    <tr template repeat="{{tr in rows}}"> <td> content </td> </tr>

2、如果你的模板中存在包含src或者href的元素，请注意，这会导致一个请求，而且会得到404，在天猫做双十一的时候，就遇到了这个问题，虽然这个错误对用户不可见，但是Console中是 看得见的，我们应当避免，要自到http连接是恨影响性能的。

<img src="/users/{{ id }}.jpg">

我们，可以先将src或者href属性修改为其它属性，如lazy-src，当然，在polymer中使用的是_src，下划线+src来替代。

四、Node Bind

可以为HTML元素的属性绑定数据，这种绑定对于一些特殊的属性，textContent/value/selectIndex/checked是双向绑定，即，你修改属性会改变数据，修改数据会改变属性。

如，input.bind('value',new PathObserver(obj,'path.to.value'));完整路径为，obj.path.to.value.

  由于这个方法位于，HTMLElement上，故所有的HTML元素都具有这个方法，并且可以自定义bind方法。

五、中文乱码，脉动回来，这是福利，亲

如果你使用的是内联脚本，且，你的代码中包含中文，自然的你会看到中文乱码，

首先你会在html的meta标签中设置charset，刷一刷，靠，不行，给script标签指定一个charset，刷一刷，靠，不行。

难道是，文件的编码不对？好吧，看看，再转下编码，略带信心的刷一刷，卧槽，你懂的

究竟是怎么回事呢？好吧，话以至此，发福利吧

其实，是应为，Polymer会提取你的脚本，放到一个单独的文件中，在这个提取的过程中，发生了点什么，然后你会看到你的中文，美妙的乱了，

怎么办？这是重点，呵呵，其实也简单，外联就好了，不给Ta提取的机会，最后你会发现，中文“脉动回来了”。

以上内容为原创，转载请注明出处，欢迎大家的交流与指正。

如果你觉得对你有用，别忘了”赞一个“哦。