Framework7 get data from Ajax and refresh

Reprinted from: http://www.680.com/Web/1609/webedit-43324.html

A simple introduction to the use of the Template7 template page. The list data in the template page was defined when the FRAMEWORK7 was initialized.

However, the actual development of the page data is not always constant. Instead, the data is fetched from an external or remote server through an AJAX request.

Let's say we have an external data to load: News.json

{

"title": "Latest News",

"News": [

{

"title": "Welcome to visit Hangge.com",

"Date": "08-20"

},

{

"title": "Framework7 page cache Settings",

"Date": "08-19"

},

{

"title": "Olympic athletes won the gold medal",

"Date": "08-19"

}

]

}

There are two ways to populate the Template7 page with the data you get.

Method 1:

In the Framework7 initialization preprocess method, the Load list page is captured for this routed event. The data is obtained through AJAX, and the data gets populated with the template before continuing.

Initialize App

var myApp = new Framework7 ({

Precompiletemplates:true,

Template7pages:true,//pages enable Template7

Template7data: {

},

Preprocess:function (content, URL, next) {

Judging if it's jump to the list page

if (Url.indexof ("list.html") >=0) {

Get the data first

$$.getjson ("Data/news.json", function (data) {

Console.log (data);

Template compilation

var compiledtemplate = template7.compile (content);

Template Data loading

Next (compiledtemplate (data));

}）；

}else{

Other pages follow normal process.

Next (content);

}

}

}）；

Method 2:

The same is true of the Preprocess method, which captures the routed event of the Load List page first. When data is obtained through AJAX, the obtained data is placed in the Template7 context data. Then continue loading the page.

Initialize App

var myApp = new Framework7 ({

Precompiletemplates:true,

Template7pages:true,//pages enable Template7

Template7data: {

},

Preprocess:function (content, URL, next) {

Judging if it's jump to the list page

if (Url.indexof ("list.html") >=0) {

Get the data first

$$.getjson ("Data/news.json", function (data) {

Console.log (data);

Setting context Data

template7.data["page:list"] = data;

Page continue to jump

Next (content);

}）；

}else{

Other pages follow normal process.

Next (content);

}

}

}）；

Method 3:

Do not jump directly from the link. Instead, the data is loaded in the linked click event, and the data is loaded into the TEMPLATE7 context data. Finally, load the list page again.

(1) Home jump link href set to #

<a href= "#" class= "open-list" > Open list Page </a>

(2) JS related code

Initialize App

var myApp = new Framework7 ({

Precompiletemplates:true,