Template7 从初始化参数中获取页面数据的例子

1，Template7介绍

（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（首页）
这个没什么特别的，直接就是一个链接。点击跳转到列表页面。

 
   
   
   
   
   
   
   
   
    css/framework7.ios.min.css">
   
   
   
   
 
 
   
   

（3）list.html（列表页面）

我们通过 T7 的 each 表达式来遍历新闻集合并显示。
这里要注意页面上配置的 data-page="list"。说明这里用到的全局的上下文数据是从上面 Framework7 初始化的时候，template7Data 参数里面"page:list"对象中获取的。