- 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 - 讨论
直接加载模板
描述
您也可以动态渲染和加载模板作为动态页面。以下代码演示了将模板用作动态页面的方法:
index.html
<script type = text/template7" id = about"> <div class = pages"> <div data-page = about" class = page"> <div class = page-content"> <div class = content-block"> <div class = content-block-inner"> <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>
所需数据从template7Data获取。要指定所需模板,需要使用带有模板 ID 的data-template属性。
您可以使用 JavaScript View 的.load()方法和template属性来传递自定义数据,如下例所示:
mainView.router.load ({ template: Template7.templates.aboutTemplate, context: { firstname: 'William', age: 27 } })
framework7_template7_pages.htm
广告