Example of Template7 retrieving page data through Ajax requests

This section briefly introduces the use of the Template7 template page. At that time, the list data on the template page was defined during Framework7 initialization.

However, in actual development, the page data does not remain unchanged. Instead, ajax requests are used to obtain data from external sources or remote servers.

Suppose we have an external data to load: news. json

{
"Title": "Latest information ",
"News ":[
        {
"Title": "Welcome to hangge.com ",
"Date": "08-20"
},
        {
"Title": "Framework7 page cache settings ",
"Date": "08-19"
},
        {
"Title": "Olympic athletes win gold medals ",
"Date": "08-19"
        }
    ]
}

There are usually two methods to populate the obtained data with the Template7 page.

Method 1:

In Framework7, initialize the preprocess method and capture the routing event on the load list page. Obtain data through ajax, and then use the template to fill the data before display.

// Initialize the app
Var myApp = new Framework7 ({
PrecompileTemplates: true,
Template7Pages: true, // pages enable Template7
Template7Data :{
},
Preprocess: function (content, url, next ){
// Determine whether to jump to the list page
If (url. indexOf ("list.html")> = 0 ){
// Obtain data first
$. GetJSON ("data/news. json", function (data ){
Console. log (data );
// Template compilation
Var compiledTemplate = Template7.compile (content );
// Load Template data
Next (compiledTemplate (data ));
});
} Else {
// Follow the normal process on other pages
Next (content );
      }
    }
});

Method 2:
 
In the preprocess method, capture the routing event on the load list page. After obtaining data through ajax, put the obtained data into the context data of Template7. Then load the page.

// Initialize the app
Var myApp = new Framework7 ({
PrecompileTemplates: true,
Template7Pages: true, // pages enable Template7
Template7Data :{
},
Preprocess: function (content, url, next ){
// Determine whether to jump to the list page
If (url. indexOf ("list.html")> = 0 ){
// Obtain data first
$. GetJSON ("data/news. json", function (data ){
Console. log (data );
// Set context data
Template7.data ["page: list"] = data;
// Continue to jump to the page
Next (content );
});
} Else {
// Follow the normal process on other pages
Next (content );
      }
    }
});

Method 3:

Do not jump directly from the link. Instead, the data is loaded in the click event of the link. After the data is loaded, the obtained data is put into the context data of Template7. Finally, load the list page.
(1) set the homepage jump link href #

<A href = "#" class = "open-list"> open the list page </a>

(2) js-related code

// Initialize the app
Var myApp = new Framework7 ({
PrecompileTemplates: true,
Template7Pages: true, // pages enable Template7
Template7Data :{
    }
});
 
// For ease of use, the custom DOM Library name is $
Var $ = Dom7;
 
// Add the homepage view
Var mainView = myApp. addView ('. view-main ',{
// Enable this view to support the dynamic navigation bar
DynamicNavbar: true
});
 
// Jump link click
$ ('. Open-list'). on ('click', function (){
// Obtain data first
$. GetJSON ("data/news. json", function (data ){
Console. log (data );
// Set context data
Template7.data ["page: list"] = data;
// Page jump
MainView. router. loadPage ("list.html ");
});
});