返回 导航

HTML5 / CSS3

hangge.com

Template7 - 模板页面的使用2（ 通过Ajax请求获取页面数据）

作者：hangge | 2016-08-30 09:04
在前文中：Template7 - 模板页面的使用1（ 从初始化参数中获取页面数据）。简单地介绍了 Template7 模板页面的使用。当时模板页面里的列表数据是在 Framework7 初始化的时候就定义好的。
        
但实际开发中，页面数据并不都是一直不变的。而是通过 ajax 请求从外部，或者远程服务器上获取数据。

假设我们有个外部数据要加载：news.json
{
    "title": "最新资讯",
    "news": [
        {
            "title": "欢迎访问hangge.com",
            "date": "08-20"
        },
        {
            "title": "Framework7页面缓存设置",
            "date": "08-19"
        },
        {
            "title": "奥运健儿勇夺金牌",
            "date": "08-19"
        }
    ]
}
如何将获取到的数据填充到 Template7 页面上，通常有下面两种方法。

方法1：
在 Framework7 初始化 preprocess 方法中，对加载列表页面这个路由事件进行捕获。先通过 ajax 获取数据，数据获取后使用模板进行填充后再继续显示。
// 初始化 app
var myApp = new Framework7({
    precompileTemplates: true,
    template7Pages: true, //pages启用Template7
    template7Data: {
    },
    preprocess: function (content, url, next) {
      //判断如果是跳转到列表页面
      if(url.indexOf("list.html")>=0){
        //先获取数据
        $$.getJSON("data/news.json", function (data) {
          console.log(data);
          //模板编译
          var compiledTemplate = Template7.compile(content);
          //模板数据加载
          next(compiledTemplate(data));
        });
      }else{
        //其他页面按正常流程走
        next(content);
      }
    }
});

方法2： 
同样是先在 preprocess 方法中，对加载列表页面这个路由事件进行捕获。通过 ajax 获取数据后，将获取到的数据放到 Template7 上下文数据中。再继续加载页面。 
// 初始化 app
var myApp = new Framework7({
    precompileTemplates: true,
    template7Pages: true, //pages启用Template7
    template7Data: {
    },
    preprocess: function (content, url, next) {
      //判断如果是跳转到列表页面
      if(url.indexOf("list.html")>=0){
        //先获取数据
        $$.getJSON("data/news.json", function (data) {
          console.log(data);
          //设置上下文数据
          Template7.data["page:list"] = data;
          //页面继续跳转
          next(content);
        });
      }else{
        //其他页面按正常流程走
        next(content);
      }
    }
});

方法3： 
不从链接直接跳转。而是在链接的 click 事件里先加载数据，数据加载完毕后将获取到的数据放到 Template7 上下文数据中。最后再加载列表页。 
（1）首页跳转链接 href 设为 #
<a href="#" class="open-list">打开列表页面</a>
（2）js相关代码 
// 初始化 app
var myApp = new Framework7({
    precompileTemplates: true,
    template7Pages: true, //pages启用Template7
    template7Data: {
    }
});

// 为便于使用，自定义DOM库名字为$$
var $$ = Dom7;

// 添加首页视图
var mainView = myApp.addView('.view-main', {
  // 让这个视图支持动态导航栏
  dynamicNavbar: true
});

//跳转链接点击
$$('.open-list').on('click', function () {
  //先获取数据
  $$.getJSON("data/news.json", function (data) {
    console.log(data);
    //设置上下文数据
    Template7.data["page:list"] = data;
    //页面跳转
    mainView.router.loadPage("list.html");
  });
});
评论

全部评论（0）

回到顶部