你是如何使用Polymer构建一个单页应用的？这个问题我们在Polymer团队里已经问过很多遍了。我们的答案（一如既往地）是“使用组件（component）！”。然而，使用新技术去解决现有的问题往往不会马上得到显著的效果。如何把一堆模块化组件组合到一个大型的实用的应用中去？
在本教程，我将会给你展示如何去构建一个功能完整的单页应用：
- 完全使用Polymer的核心元素构建
- 使用响应式设计
- 使用数据绑定特性过渡视图
- 使用URL路由和深层链接特性
- 可访问键盘
- 按需动态载入内容（可选）
应用架构
设计布局是开始一个项目的首要任务之一。作为核心元素集合的一部分，Polymer通过几个布局元素 来支撑应用程序的构架（<core-header-panel>, <core-drawer-panel>, <core-toolbar>）。这些组件本身就很好用，但是为了更快地开始项目，我们打算着重于<core-scaffold>。有了它你可以通过组装几个基本的元素就能做出一个响应式的移动端布局。
<core-scaffold>的子元素可以是指定特定的元素或使用特定的标签（或两者一起使用）。举个例子，使用<nav>元素创建应用抽屉菜单。你可以在任意的元素里使用navigation属性（e.g <core-header-panel navigation>）。工具栏通过工具属性标识。它的所有其他子元素都定义在主要内容区域里。
例子
|
1 2 3 4 5 6 7 |
<body unresolved fullbleed> <core-scaffold id="scaffold"> <nav>Left drawer</nav> <core-toolbar tool>Application</core-toolbar> <div>Main content</div> </core-scaffold> </body> |
让我们一起来深入这些内容的每一部分
抽屉菜单
你放在导航元素里的标记都定义在滑走的应用抽屉菜单里。为了我们的目标 ，我坚持使用标题(<core-toolbar>)和导航链接 (<core-menu>)：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<nav> <core-toolbar><span>Single Page Polymer</span></core-toolbar> <core-menu selected="0"> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#one">Single</a> </paper-item> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#two">page</a> </paper-item> ... </core-menu> </nav> |
注意，现在<core-menu selected=”0″>被硬编码为选择第一个条目。我们以后会把它改为动态的。
工具栏
工具栏横跨了页面顶部并包含了功能按钮图标。满足这种功能的完美元素是<core-toolbar>：
|
1 2 3 4 5 6 7 |
<!-- flex makes the bar span across the top of the main content area --> <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> |
主要内容
最后一部分是为你的内容而留的。它可以是任何的元素。<div>是一个很好的选择：
|
1 2 3 |
<div layout horizontal center-center fit> <!-- fill with pages --> </div> |
fit属性表示主要区域的内容会布满父元素的宽带和高度，layout horizontal center-center属性表示使用弹性框（flexbox）来使内容居中和垂直居中。
创建“视图”
多视图（或者多页面）可以使用<core-pages>或者<core-animated-pages>来创建。在一次只展示一个子元素时，两个元素都很有用。而使用<core-animated-pages>的好处是，它提供了更多的默认和灵活的页面过渡。
下面的演示（demo）使用了<core-animated-pages>元素的slide-from-right过渡效果。首先，导入元素定义和slide-from-right过渡效果。
|
1 2 |
<link rel="import" href="components/core-animated-pages/core-animated-pages.html"> <link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html"> |
然后插入你的内容：
|
1 2 3 4 5 6 7 8 9 10 11 |
<div layout horizontal center-center fit> <core-animated-pages selected="0" transitions="slide-from-right"> <section layout vertical center-center> <div>Single</div> </section> <section layout vertical center-center> <div>page</div> </section> ... </core-animated-pages> </div> |
注意，现在 <core-animated-pagesselected=”0″>这行代码是硬编码去选择第一页。不过我们以后会把它写成动态的。
现在你应该拥有了一个基本的应用，但是这里有一些小的问题需要注意。多亏了Polymer每个元素提供的布局属性和默认样式，你可以不写任何的CSS代码就可以实现一个响应式应用。当然，从material design调色板里获取一些灵感，设置t="_blank" href="http://group.jobbole.com/category/feedback/trans-team/">翻译组。
