Framework7 - Template7 Pages

Framework7 Template7 Pages - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7 ，动作按钮，窗体，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点击保持事件，触摸波纹。

描述

Template7是一个移动优先的JavaScript模板引擎，带有 handlebars.js 喜欢语法.它是Framework7中的超轻量级和超快速的默认模板引擎.

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

  var myApp = new Framework7({ template7Pages:true//为Ajax和动态页面启用Template7呈现}) ;

S.No	Template7 Pages Usage&说明
1	模板/页面数据您可以通过在 template7Data中指定所有页面数据来传递特定页面所需的数据/上下文参数，在初始化应用程序时发送.
2	传递自定义上下文 Framework7允许您传递自定义上下文任何动态页面或任何加载的Ajax.
3	直接加载模板您可以在飞行中渲染和加载模板作为动态页面.
4	URL查询如果您使用的是Templ ate7用于呈现Ajax页面，其上下文始终将使用特殊属性 url_query 进行扩展.

示例

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

index.html

                                 Framework7                                                                                          Template7 Pages

//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute //provides link as 'About' About
//a context name for this link we pass context path from template7Data root //provides link as 'Likes' Likes

Back About Me

//displays the details of the user by using the 'my-app.js' file

Hello, i am {{firstname}} {{lastname}}, {{age}} years old and working as {{position}} at {{company}}.

my-app.js

// Initialize your appvar 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 Viewvar 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 文件.
将此HTML文件打开为http://localhost/index.html，输出显示如下.
该示例提供了链接，当您点击这些链接时，会显示用户信息，例如用户详细信息和用户喜欢的内容.