当前位置: > > > Template7 - 模板页面的使用1( 从初始化参数中获取页面数据)

Template7 - 模板页面的使用1( 从初始化参数中获取页面数据)

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

(3)list.html(列表页面)
我们通过 T7each 表达式来遍历新闻集合并显示。
这里要注意页面上配置的 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