- 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
廣告