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_はアプリの初期化されたインスタンスです。

あなたのインデックスファイルで次のテンプレートを使用することができます-

<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 _after_アプリの初期化でテンプレートにアクセスすることもできます-

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
});

Framework7-auto-compilation

Framework7-自動コンパイル

説明

Template7.templates/myApp.templates