Template7通過Ajax請求擷取頁面資料的例子

簡單地介紹了 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");
  });
});