Framework7 - Biên dịch tự động

Sự miêu tả

Trong Template7, bạn có thể tự động biên dịch các mẫu của mình bằng cách chỉ định các thuộc tính đặc biệt trong thẻ <script>.

Đoạn mã sau hiển thị bố cục biên dịch tự động:

<script type = "text/template7" id = "myTemplate">
   <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>

Bạn có thể sử dụng các thuộc tính sau để khởi tạo tự động biên dịch -

• type = "text/template7" - Nó được sử dụng để yêu cầu Template7 tự động biên dịch và nó là một loại tập lệnh bắt buộc.

• id = "myTemplate" - Mẫu có thể truy cập thông qua id và nó là id mẫu bắt buộc.

Để biên dịch tự động, bạn cần bật khởi tạo ứng dụng bằng cách chuyển tham số sau:

var myApp = new Framework7 ({
   //It is used to compile templates on app init in Framework7
   precompileTemplates: true,
});

Template7.templates / myApp.templates

Các mẫu được biên dịch tự động có thể được truy cập dưới dạng thuộc tính của Template7.templates sau khi khởi chạy ứng dụng. Nó còn được gọi là myApp.templates trong đó myApp là một phiên bản được khởi tạo của ứng dụng.

Bạn có thể sử dụng các mẫu sau trong tệp index.html của chúng tôi -

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

Bạn cũng có thể truy cập các mẫu trong JavaScript sau khi khởi chạy ứng dụng -

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