当前位置: > > > Template7 - 模板页面的使用2( 通过Ajax请求获取页面数据)

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

在前文中: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