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 และเป็นรหัสเทมเพลตที่จำเป็น
สำหรับการคอมไพล์อัตโนมัติคุณต้องเปิดใช้งานการเริ่มต้นแอพโดยส่งผ่านพารามิเตอร์ต่อไปนี้ -
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
});