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