Framework7-templates-load-template
提供:Dev Guides
テンプレートを直接読み込む
説明
テンプレートを動的ページとしてオンザフライでレンダリングおよびロードすることもできます。 次のコードは、動的ページとしてのテンプレートの使用を示しています-
インデックス
<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ビューの_.load()_メソッドと_template_プロパティを使用して、カスタムデータを渡すことができます-
mainView.router.load ({
template: Template7.templates.aboutTemplate,
context: {
firstname: 'William',
age: 27
}
})