framework7 从ajax获取数据然后刷新
转载自:http://www.680.com/Web/1609/webedit-43324.html
简单地介绍了 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"）；
}）；
}）；