Description
Template7 is a mobile-first JavaScript template engine with handlebars.js like syntax. It is ultra lightweight and blazing fast default template engine in Framework7.First, we need to pass below parameter on app initialization that renders all Ajax and dynamic pages as Template7 template:
var myApp = new Framework7({ template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages });
| S.N. | Template7 pages usage & Description |
|---|---|
| 1 | Templates/Pages Data You can pass required data/context for specific pages by specifying all pages data in template7Data parameter sent on initializing an App. |
| 2 | Pass Custom Context Framework7 allows you to pass custom context to any dynamic page or any loaded Ajax. |
| 3 | Load Templates Directly You can render and load templates on fly as dynamic pages. |
| 4 | URL Query If you are using Template7 for rendering Ajax pages, its context always will be extended with special property url_query. |
Example
The below example provides the links which displays the user information such as user details, user likes etc when you click on those links.index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>Framework7</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"> </head> <body> <div class="views"> <div class="view view-main"> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding">Template7 Pages</div> </div> </div> <div class="pages navbar-through toolbar-through"> <div data-page="index" class="page"> <div class="page-content"> <div class="list-block"> <ul> <li> //plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute <a href="#" data-template="about" data-context-name="about" class="item-link item-content"> <div class="item-inner"> //provides link as 'About' <div class="item-title">About</div> </div> </a> </li> <li> //a context name for this link we pass context path from template7Data root <a href="/framework7/src/likes.html" class="item-link item-content"> <div class="item-inner"> //provides link as 'Likes' <div class="item-title">Likes</div> </div> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/template7" id="about"> <div class="navbar"> <div class="navbar-inner"> <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div> <div class="center sliding">About Me</div> <div class="right"><a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a></div> </div> </div> <div class="pages"> <div data-page="about" class="page"> <div class="page-content"> <div class="content-block"> <div class="content-block-inner"> //displays the details of the user by using the 'my-app.js' file <p>Hello, i am <b>{{firstname}} {{lastname}}</b>, <b>{{age}}</b> years old and working as <b>{{position}}</b> at <b>{{company}}</b>.</p> </div> </div> </div> </div> </div> </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script type="text/javascript" src="/framework7/src/js/my-app.js"></script> </body> </html>my-app.js
// Initialize your app var myApp = new Framework7({ animateNavBackIcon: true, // Enable templates auto precompilation precompileTemplates: true, // Enabled rendering pages using Template7 template7Pages: true, // Specify Template7 data for pages template7Data: { //provides the url for different page with data-page="likes" 'url:likes.html': { likes: [ { title: 'Nelson Mandela', description: 'Champion of Freedom' }, { title: 'Srinivasa Ramanujan', description: 'The Man Who Knew Infinity' }, { title: 'James Cameron', description: 'Famous Filmmaker' } ] }, about: { firstname: 'William ', lastname: 'Root', age: 27, position: 'Developer', company: 'TechShell', } } }); // Add main View var mainView = myApp.addView('.view-main', { // Enable dynamic Navbar dynamicNavbar: true });likes.html
<div class="navbar"> <div class="navbar-inner"> <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div> <div class="center sliding">Likes</div> <div class="right"><a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a></div> </div> </div> <div class="pages"> <div data-page="likes" class="page"> <div class="page-content"> <div class="content-block-title">My Likes</div> <div class="list-block media-list"> //iterate through likes <ul>{{#each likes}} <li class="item-content"> <div class="item-inner"> <div class="item-title-row"> //displays the title and description by using the 'my-app.js' file <div class="item-title">{{title}}</div> </div> <div class="item-subtitle">{{description}}</div> </div> </li>{{/each}} </ul> </div> </div> </div> </div>
Output
Let's carry out the following steps to see how above code works:- Save above HTML code as index.html file in your server root folder.
- Open this HTML file as http://localhost/index.html and output as below gets displayed.
- The example provides the links which displays the user information such as user details, user likes when you click on those links.
No comments:
Post a Comment