Template7 - 模板页面的使用1（ 从初始化参数中获取页面数据）
作者：hangge | 2016-08-28 09:35
1，Template7介绍
（1）Template7 是一个移动优先（mobile-first）的模板引擎，其特点是非常轻量，速度很快。
（2）Framework7 已经内置 Template7，无需包含额外的 JS 文件。
（3）Template7 也可以脱离 Framework7，单独使用。
下面通过一个样例演示如何使用 Template7 页面：
（1）在首页点击“打开列表页面”后跳转到新闻列表页。 
同时要解析模板，必须提供必要的上下文（数据）对象。这里通过应用初始化参数 template7Data 设置全局的上下文数据。
（2）index.html（首页）
这个没什么特别的，直接就是一个链接。点击跳转到列表页面。
（3）list.html（列表页面）
我们通过 T7 的 each 表达式来遍历新闻集合并显示。
这里要注意页面上配置的 data-page="list"。说明这里用到的全局的上下文数据是从上面 Framework7 初始化的时候，template7Data 参数里面"page:list"对象中获取的。
（1）Template7 是一个移动优先（mobile-first）的模板引擎，其特点是非常轻量，速度很快。
（2）Framework7 已经内置 Template7，无需包含额外的 JS 文件。
（3）Template7 也可以脱离 Framework7，单独使用。
2，Template7页面
Template7 允许把新的 Ajax 页面、动态页面作为 Template7 模板来解析。下面通过一个样例演示如何使用 Template7 页面：
（1）在首页点击“打开列表页面”后跳转到新闻列表页。
（2）这个新页面中我们通过 Template7 模板技术，将上下文数据填充到页面中来。
3，样例代码
（1）my-app.js（应用的js）
要启用 Template7 页面功能，首先要在 Framework7 初始化的时候将其设置为 true。同时要解析模板，必须提供必要的上下文（数据）对象。这里通过应用初始化参数 template7Data 设置全局的上下文数据。
// 初始化 app
var myApp = new Framework7({
precompileTemplates: true,
template7Pages: true, //pages启用Template7
template7Data: {
"page:list": {
title: "最新资讯",
news: [
{
title: "欢迎访问hangge.com",
date: "08-20"
},
{
title: "Framework7页面缓存设置",
date: "08-19"
},
{
title: "奥运健儿勇夺金牌",
date: "08-19"
}
]
}
},
});
（2）index.html（首页）
这个没什么特别的，直接就是一个链接。点击跳转到列表页面。
<!DOCTYPE html>
<html>
<head>
<!-- meta标签设置-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- app标题 -->
<title>hangge.com</title>
<!-- 使用iOS CSS主题样式-->
<link rel="stylesheet" href="css/framework7.ios.min.css">
<!-- iOS related颜色样式 -->
<link rel="stylesheet" href="css/framework7.ios.colors.min.css">
<!-- 自定义样式-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- 所有的Views视图 -->
<div class="views">
<!-- 主视图（需要有"view-main"样式） -->
<div class="view view-main">
<!-- 顶部导航栏 -->
<div class="navbar">
<div class="navbar-inner">
<!-- 标题元素（为了让页面切换时标题文字有滑动效果，添加sliding样式） -->
<div class="center sliding">hangge.com</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<!-- 首页, "data-page" 里设置页面名字 -->
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p><a href="list.html" class="open-list">打开列表页面</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Framework7框架的js-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- 你的应用的js -->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
我们通过 T7 的 each 表达式来遍历新闻集合并显示。
这里要注意页面上配置的 data-page="list"。说明这里用到的全局的上下文数据是从上面 Framework7 初始化的时候，template7Data 参数里面"page:list"对象中获取的。
<!-- 这个页面由于会通过Ajax加载，所以我们不需要实现完整的布局，只需添加.navbar和.page即可-->
<!-- 顶部导航栏 -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span></span>
</a>
</div>
<div class="center sliding">{{title}}</div>
<div class="right">
</div>
</div>
</div>
<div class="pages">
<div data-page="list" class="page">
<div class="page-content">
<div class="list-block">
<ul>
<!-- 循环遍历新闻列表 -->
{{#each this.news}}
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">{{this.title}}</div>
<div class="item-after">{{this.date}}</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
全部评论（0）