📌  相关文章
📜  Framework7-Template7页面

📅  最后修改于: 2020-10-25 03:01:09             🧑  作者: Mango

描述

Template7是移动优先的JavaScript模板引擎，具有类似于handlebars.js的语法。它是Framework7中的超轻量级且快速的默认模板引擎。

首先，我们需要在应用初始化时传递以下参数，以将所有Ajax和动态页面呈现为Template7模板-

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 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.

例

以下示例提供了链接，当您单击这些链接时，这些链接将显示用户信息，例如用户详细信息，用户喜欢程度等。

index.html


      
      
      
      Framework7
      
      
   

   
      

         

            
            

               

                  
Template7 Pages

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


   

      

          Back
      

      
      
Likes

      

          
      

   






   

      

         
My Likes

         

         
            //iterate through likes
            
    
               {{#each likes}}
                  
  • 
                     
    
                        
    
                           //displays the title and description by using the 'my-app.js' file
                           
    {{title}}
    
                        
    
                        
    {{description}}
    
                     
    
                  
    • 
               {{/each}}

输出

让我们执行以下步骤，看看上面给出的代码如何工作-

  • 将上述给定的HTML代码另存为服务器根文件夹中的index.html文件。

  • 以http：//localhost/index.html格式打开此HTML文件，并显示如下所示的输出。

  • 该示例提供了链接，这些链接显示了用户信息，例如用户详细信息，单击时喜欢的用户。