原文 http://forjs.org/book/lkaK8WuNme/section/gJxDnDq4K8g 使用web components创建单页应用 ============================
推荐：《精通Node.js开发》 《Angular.js视频详解》
可加作者QQ 1405491181 交流Node.js & HTML5 相关技术
demo的最终效果
这个demo将采用以下的技术，来开发单页应用程序：
- 使用Polymer的 core elements 组件
- 响应式设计
- 使用data-binging数据绑定
- 使用路由和深层链接
- 键盘访问
- 动态加载内容
创建基本框架
<body unresolved fullbleed>
<core-scaffold id="scaffold">
<nav>右侧导航</nav>
<core-toolbar>工具栏</core-toolbar>
<div>主内容区</div>
</core-scaffold>
</body>
效果
- unresolved 可以预防闪烁
- fullbleed 填充整个页面
core-scaffold
core-scaffold 基本
- core-scaffold 组件，内部有 菜单 / 工具栏 / 内容区域
- 用属性 navigation / tool / fit 也可以定义
core-scaffold 属性
- 自适应的最小尺寸 responsiveWidth = “600px”
- mode = “seamed” 设置默认滚动模式
core-scaffold 事件
- scroll 事件，是由于主内容区滚动，event.detail.target 返回主内容区 dom 对象。
core-scaffold 方法
- openDrader() / togglePanel() 没发现什么区别，都是在合并状态下打开 drawer
- closeDrader() 关闭 drader
core-toolbar
core-toolbar 是水平式元素，可用于标签、导航、搜索和各种按钮操作。
- 他有个默认高度
- 通过 class=“tall” 设置 x3 倍高度
- medium-tall 设置 x2 高度
<core-toolbar class="tall">
<!--<core-icon-button icon="menu"></core-icon-button>-->
<div class="indent">Middle Title</div>
<div class="middle indent">Middle Title</div>
<div class="bottom indent">Bottom Title</div>
</core-toolbar>
如果 toolbar class=“tall” 可以设置3行元素，而 medium-tall 可以设置两行。
OK, 研究了core-toolbar 我们继续开发左侧的 Navigation 。
开发左侧 Navigation
<nav>
<core-toolbar><span> Forjs.org </span></core-toolbar>
<core-menu selected="0">
<paper-item icon="label-outline" label="《精通Node.js开发》">
<a href="#nodejs"></a>
</paper-item>
<paper-item icon="label-outline" label="《Angular.js视频详解》">
<a href="#angular"></a>
</paper-item>
</core-menu>
</nav>
先秀一下效果
下面要对 core-menu 元素进行分析
core-menu
core-menu 选择样式看起来像菜单
可以在它内部添加 core-item ，加入 core-selected
core-item.core-selected {
color : red;
}
- selectedItem 属性表示当前选中的值
- selected 属性表示选那个item
- core-select 事件，当选时fire。
core-item
<core-item icon="settings" label="Settings"></core-item>
属性
- src 一个icon图片 url
- icon
- label
可以这样
<core-item icon="settings" label="Settings">
<a href="#"></a>
</core-item>
peper-item
它和 core-item 差不多
- iconSrc 等同于 core-item#icon
开发顶端工具栏
<core-toolbar tool flex>
<!-- flex spaces this element and jusifies the icons to the right-side -->
<div flex>Application</div>
<core-icon-button icon="refresh"></core-icon-button>
<core-icon-button icon="add"></core-icon-button>
</core-toolbar>
- flex 的mean 是填充余下的部分
主内容区
<div layout horizontal center-center fit></div>
- layout 属性 表示要进行布局
- horizontal 横向布局
- center-center 横向和垂直都居中
- fit 表示填充剩余区域
加入动态页面组件
<div layout center-center horizontal fit>
<core-animated-pages selected="0" transitions="slide-from-right">
<section layout vertical center-center>
<div>《精通Node.js开发》</div>
</section>
<section layout vertical center-center>
<div>《Angular.js视频详解》</div>
</section>
</core-animated-pages>
</div>
并设置样式
core-animated-pages{
width:85%;
height: 85%;
background-color: white;
}
core-selector 组件
core-animated-pages 继承自 core-selector 所以，要先研究core-selector。
该组件是用来表示可选择的component。
<core-selector selected="0">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</core-selector>
core-selector 是没有样式的，需要手工写。
core-selector 属性
- selected=null 可以用索引，也可以用valueattr + label 方式来定位。
<core-selector valueattr="label" selected="foo">
<div label="foo"></div>
<div label="bar"></div>
<div label="zot"></div>
</core-selector>
- multi=“false”
- valueattr=“name”
- selectedClass=“core-selected”
- selectedProperty="" ，选者后设置的item元素的属性值 例如：selectedProperty=“checked”
<input type="radio" name="color" checked="checked" value="red">
- selectedAttribute=“active” 属性值 <div active></div>
- selectedItem 被选择的dom对象
- selectedModel 这个属性没弄明白 doto
- selectedIndex
- excludedLocalNames 设置不包括的元素
<core-selector excludedLocalNames="h3 hr">
<h3>Header</h3>
<core-item>Item1</core-item>
<core-item>Item2</core-item>
<hr>
<core-item>Item3</core-item>
<core-item>Item4</core-item>
</core-selector>
- target 默认是容器
- itemsSelector
<core-selector target="{{$.myForm}}" itemsSelector="input[type=radio]"></core-selector>
<form id="myForm">
<label><input type="radio" name="color" value="red"> Red</label> <br>
<label><input type="radio" name="color" value="green"> Green</label> <br>
<label><input type="radio" name="color" value="blue"> Blue</label> <br>
<p>color = {{color}}</p>
</form>
- activateEvent=“tap”
<core-selector id="test" itemsSelector="input[type=radio]"
selected="green" valueattr="value" selectedProperty="checked"
activateEvent="change"></core-selector>
<form id="myForm">
<label><input type="radio" name="color" value="red"> Red</label> <br>
<label><input type="radio" name="color" value="green"> Green</label> <br>
<label><input type="radio" name="color" value="blue"> Blue</label> <br>
</form>
-
notap=false 设置true 将关闭 activateEvent 功能
-
items 返回全部 的 sub dom
core-selector 事件
-
core-select 当有item状态改变了，就触发，所以它有可能，选一下，激发2个 core-select ，一个是被选，一个是取消选。 detail.isSelected( boolean ) detail.item( Object )
-
core-activate 当item被选了 触发 detail.item( Object )
core-selector 方法
- selectPrevious 选上一个，只有单选可用。return true 表示到达第一个了
- selectNext
core-animated-pages 组件
用于显示多个子页面其中之一，并在切换之间提供过度效果，这些效果可以使用core核心的，也可以自己开发实现。
注意下面两种写法：
// 这是不工作的，因为容器是不参与工作的。
<core-animated-pages transitions="cross-fade">
<section cross-fade></section>
<section cross-fade></section>
</core-animated-pages>
// 这才正确
<core-animated-pages transitions="cross-fade">
<section>
<div cross-fade></div>
</section>
<section>
<div cross-fade></div>
</section>
</core-animated-pages>
core-animated-pages 属性
-
transitions = ‘’ 转换方式
-
lastSelected 选择的最后一页dom 对象
core-animated-pages 事件
- core-animated-pages-transition-prepare 页面转换之前被触发
- core-animated-pages-transition-end
数据绑定
<body unresolved fullbleed>
<template is="auto-binding">
</template>
</body>
这里的 is=“auto-binding” 是快速创建一个 polymer 元素，元素本身就是 这个 template dom。
导航
<nav>
<core-toolbar><span> Forjs.org </span></core-toolbar>
<core-menu selected="{{route}}">
<template repeat="{{page in pages}}">
<paper-item icon="label-outline" label="{{page.label}}">
<a href="#"></a>
</paper-item>
</template>
</core-menu>
</nav>
内容区
<core-animated-pages selected="{{route}}" valueattr="label" transitions="slide-from-right">
<template repeat="{{page in pages}}">
<section layout vertical center-center label="page.label">
<div>
{{page.label}}
</div>
</section>
</template>
</core-animated-pages>
route代码
<script>
window.addEventListener("polymer-ready", function () {
var templ = document.querySelector("template[is='auto-binding']");
templ.pages = [
{label:"《精通Node.js开发》"},
{label:"《Angular.js视频详解》"}
]
})
</script>
效果
@leogiese 没学过polymer这么future的东西，但是我觉得components和Angular的customer directive是功能相近的东西，而且个人觉得Angular是很霸道的框架，应该不喜欢和其他小伙伴不合吧，连老大哥jQuery都不放眼里的说。----个人想法
@ChopperLee2011 polymer 和 angular 都是 google一个团队开发的，开发这两个框架的目的是 web components 扩展html元素，angular为应用层。不是喜不喜欢的事儿，而是压根是一个团队的两个项目，是相互配合的。呵呵，没法不喜欢，双胞胎。
@node007 哦， 就是想起来有个大牛说过，他学了很多种语言，总结就是语言总是不断改进的。 angular的方式也算是改进jquery，不管怎么样，多选择可能是好事也可能是坏事。
@node007 坑不少，确实从易到难，虽然用了1年多了。
- 能够分离view，也就是说，你写的东西不用理view，移植复用特别方便。
- 调用简单，很多操作可以封装成directive，新手的话，只要一段html代码就能够使用了。
- 双向绑定，类似1，移植方便，而且更改model，界面也就跟着变了，相比jquery，强太多了。
- 这可能是缺点，很庞大，当然相对也完善。
就想到这么多了，除了很多显而易见的好处外，后期学习难度挺大。
如果让我选择的话，我很愿意选择angular，如果让我再选一次的话，我会努力巩固javascript基础，然后选择angualr。
