- Framework7教程
- Framework7 - 主页
- Framework7 - 概述
- Framework7 - 环境
- Framework7 组件
- Framework7 - 布局
- Framework7 - 导航栏
- Framework7 - 工具栏
- Framework7 - 搜索栏
- Framework7 - 状态栏
- Framework7 - 侧面板
- Framework7 - 内容块
- Framework7 - 布局网格
- Framework7 - 覆盖层
- Framework7 - 预加载器
- Framework7 - 进度条
- Framework7 - 列表视图
- Framework7 - 手风琴
- Framework7 - 卡片
- Framework7 - 芯片
- Framework7 - 按钮
- Framework7 - 操作按钮
- Framework7 - 表格
- Framework7 - 选项卡
- Framework7 - Swiper 滑块
- Framework7 - 照片浏览器
- Framework7 - 自动完成
- Framework7 - 选择器
- Framework7 - 日历
- Framework7 - 刷新
- Framework7 - 无限滚动
- Framework7 - 消息
- Framework7 - 消息栏
- Framework7 - 通知
- Framework7 - 延迟加载
- Framework7 样式
- Framework7 - 颜色主题
- Framework7 - 细线
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自动编译
- Framework7 - Template7 页面
- Framework7 快速点击
- Framework7 - 活动状态
- Framework7 - 点击保持事件
- Framework7 - 触摸波纹
- Framework7 有用的资源
- Framework7 - 快速指南
- Framework7 - 有用的资源
- Framework7 - 讨论
Framework7 - 自动编译
描述
在 Template7 中,您可以通过在 <script> 标记中指定特殊属性来自动编译模板。
以下代码显示了自动编译布局 -
<script type = "text/template7" id = "myTemplate"> <p>Hello, my name is {{name}} and i am {{age}} years old</p> </script>
您可以使用以下属性来初始化自动编译 -
type = "text/template7" - 用于告诉 Template7 自动编译,它是必需的脚本类型。
id = "myTemplate" - 模板可通过 id 访问,并且它是必需的模板 id。
对于自动编译,您需要通过传递以下参数来启用应用程序初始化 -
var myApp = new Framework7 ({ //It is used to compile templates on app init in Framework7 precompileTemplates: true, });
Template7.templates / myApp.templates
初始化应用程序后,可以将自动编译的模板作为Template7.templates的属性进行访问。它也称为myApp.templates,其中myApp是应用程序的初始化实例。
您可以在我们的 index.html 文件中使用以下模板 -
<script type = "text/template7" id = "personTemplate"> <p>Hello, my name is {{name}} and i am {{age}} years old</p> <p>I work as {{position}} at {{company}}</p> </script> <script type = "text/template7" id = "carTemplate"> <p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p> <p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p> </script>
您还可以在应用程序初始化后访问 JavaScript 中的模板-
var myApp = new Framework7 ({ //Tell Framework7 to compile templates on app init precompileTemplates: true }); // Render person template to HTML, its template is already compiled and accessible as //Template7.templates.personTemplate var personHTML = Template7.templates.personTemplate ({ name: 'King Amit', age: 27, position: 'Developer', company: 'AngularJs' }); // Compile car template to HTML, its template is already compiled and accessible as //Template7.templates.carTemplate var carHTML = Template7.templates.carTemplate({ vendor: 'Honda', model: 'city', power: 1200hp, speed: 300 });