फ्रेमवर्क 7 - ऑटो संकलन

विवरण

टेम्प्लेट 7 में आप <स्क्रिप्ट> टैग में विशेष विशेषताओं को निर्दिष्ट करके अपने टेम्पलेट्स को स्वचालित रूप से संकलित कर सकते हैं।

निम्नलिखित कोड ऑटो संकलन लेआउट दिखाता है -

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

ऑटो संकलन को शुरू करने के लिए आप निम्नलिखित विशेषताओं का उपयोग कर सकते हैं -

• type = "text/template7" - इसका उपयोग टेम्प्लेट 7 को ऑटो कंपाइल को बताने के लिए किया जाता है और यह एक आवश्यक स्क्रिप्ट प्रकार है।

• id = "myTemplate" - टेम्पलेट आईडी के माध्यम से सुलभ है और यह एक आवश्यक टेम्पलेट आईडी है।

स्वचालित संकलन के लिए, आपको निम्नलिखित पैरामीटर पास करके ऐप इनिशियलाइज़ेशन को सक्षम करना होगा -

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>

ऐप इनिशियलाइज़ेशन के बाद आप जावास्क्रिप्ट में टेम्प्लेट भी एक्सेस कर सकते हैं -

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