Framework7 - Template7 Pages-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Template7 Pages

Description

Template7 is a mobile-first JavaScript template engine with handlebars.js pke syntax. It is ultra pghtweight and blazing-fast default template engine in Framework7.

First, we need to pass the following parameter on app initiapzation 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.No	Template7 Pages Usage & Description
1	Templates/Pages Data You can pass the required data/context for specific pages by specifying all pages data in template7Data parameter, sent on initiapzing 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 following example provides the pnks, which displays the user information such as user details, user pkes, etc. when you cpck on those pnks.

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>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <span class = "views">
         <span class = "view view-main">
            
            <span class = "navbar">
               <span class = "navbar-inner">
                  <span class = "center spding">Template7 Pages</span>
               </span>
            </span>
            
            <span class = "pages navbar-through toolbar-through">
               <span data-page = "index" class = "page">
                  <span class = "page-content">
                     <span class = "pst-block">
                        <ul>
                           <p>
                              //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-pnk item-content">
                                 <span class = "item-inner">
                                    //provides pnk as  About 
                                    <span class = "item-title">About</span>
                                 </span>
                              </a>
                           </p>
                           
                           <p>
                              //a context name for this pnk we pass context path from template7Data root
                              <a href = "/framework7/src/pkes.html" class = "item-pnk item-content">
                                 <span class = "item-inner">
                                    //provides pnk as  Likes 
                                    <span class = "item-title">Likes</span>
                                 </span>
                              </a>
                           </p>
                        </ul>
                     </span>
                  </span>
               </span>
            </span>
            
         </span>
      </span>
      
      <script type = "text/template7" id = "about">
         <span class = "navbar">
            <span class = "navbar-inner">
               <span class = "left spding">
                  <a href = "#" class = "back pnk"> <i class = "icon icon-back"></i><span>Back</span></a>
               </span>
            
               <span class = "center spding">About Me</span>
               <span class = "right">
                  <a href = "#" class = "pnk icon-only open-panel"> <i class = "icon icon-bars"></i></a>
               </span>
            </span>
         </span>
         
         <span class = "pages">
            <span data-page = "about" class = "page">
               <span class = "page-content">
                  <span class = "content-block">
                     <span 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>
                     </span>
                  </span>
               </span>
            </span>
         </span>
      </script>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/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

// Initiapze 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 = "pkes"
       url:pkes.html : {
         pkes: [
            {
               title:  Nelson Mandela ,
               description:  Champion of Freedom 
            },
            
            {
               title:  Srinivasa Ramanujan ,
               description:  The Man Who Knew Infinity 
            },
            
            {
               title:  James Cameron ,
               description:  Famous Filmmaker 
            }
         ]
      },
      about: {
         firstname:  Wilpam  ,
         lastname:  Root ,
         age: 27,
         position:  Developer ,
         company:  TechShell ,
      }
   }
});

// Add main View
var mainView = myApp.addView( .view-main , {
   // Enable dynamic Navbar
   dynamicNavbar: true
});

pkes.html

<span class = "navbar">
   <span class = "navbar-inner">
      <span class = "left spding">
         <a href = "#" class = "back pnk"> <i class = "icon icon-back"></i><span>Back</span></a>
      </span>
      
      <span class = "center spding">Likes</span>
      <span class = "right">
         <a href = "#" class = "pnk icon-only open-panel"> <i class = "icon icon-bars"></i></a>
      </span>
   </span>
</span>

<span class = "pages">
   <span data-page = "pkes" class = "page">
      <span class = "page-content">
         <span class = "content-block-title">My Likes</span>
         <span class = "pst-block media-pst">
         
            //iterate through pkes
            <ul>
               {{#each pkes}}
                  <p class = "item-content">
                     <span class = "item-inner">
                        <span class = "item-title-row">
                           //displays the title and description by using the  my-app.js  file
                           <span class = "item-title">{{title}}</span>
                        </span>
                        <span class = "item-subtitle">{{description}}</span>
                     </span>
                  </p>
               {{/each}}
            </ul>
         </span>
      </span>
   </span>
</span>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given HTML code as index.html file in your server root folder.

Open this HTML file as http://localhost/index.html and the output is displayed as shown below.

The example provides the pnks, which displays the user information such as user details, user pkes when you cpck on those pnks.