Example of Template7 retrieving page data through Ajax requests

Source: Internet
Author: User
Tags json


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 ");
});
});

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.