फ्रेमवर्क 7 - टेम्पलेट 7 पेज

विवरण

Template7 एक मोबाइल-प्रथम जावास्क्रिप्ट टेम्पलेट इंजन है जिसमें सिंटैक्स की तरह handlebars.js है। यह फ्रेमवर्क 7 में अल्ट्रा लाइटवेट और ब्लेजिंग-फास्ट डिफॉल्ट टेम्पलेट इंजन है।

सबसे पहले, हमें ऐप इनिशियलाइज़ेशन पर निम्नलिखित पैरामीटर को पास करना होगा जो सभी Ajax और डायनेमिक पेजों को टेम्पलेट 7 टेम्पलेट के रूप में प्रस्तुत करता है -

var myApp = new Framework7 ({
   template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});

S.No	टेम्प्लेट 7 पेज उपयोग और विवरण
1	टेम्प्लेट / पृष्ठ डेटा आप ऐप को इनिशियलाइज़ करने पर भेजे गए टेम्पलेट 7 डेटा पैरामीटर में सभी पेज डेटा निर्दिष्ट करके विशिष्ट पृष्ठों के लिए आवश्यक डेटा / संदर्भ पास कर सकते हैं ।
2	कस्टम संदर्भ पास करें फ्रेमवर्क 7 आपको किसी भी डायनेमिक पेज या किसी लोडेड अजाक्स के लिए कस्टम संदर्भ पास करने की अनुमति देता है।
3	लोड टेम्पलेट्स सीधे आप डायनामिक पेज के रूप में फ्लाई पर टेम्पलेट्स को रेंडर और लोड कर सकते हैं।
4	URL क्वेरी यदि आप Ajax पृष्ठों को प्रस्तुत करने के लिए टेम्पलेट 7 का उपयोग कर रहे हैं, तो इसका संदर्भ हमेशा विशेष संपत्ति url_query के साथ बढ़ाया जाएगा ।

उदाहरण

निम्न उदाहरण लिंक प्रदान करता है, जो उन लिंक पर क्लिक करने पर उपयोगकर्ता जानकारी, जैसे उपयोगकर्ता विवरण, उपयोगकर्ता पसंद आदि प्रदर्शित करता है।

index.html

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Framework7</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Template7 Pages</div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <div class = "list-block">
                        <ul>
                           <li>
                              //plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
                              <a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'About'
                                    <div class = "item-title">About</div>
                                 </div>
                              </a>
                           </li>
                           
                           <li>
                              //a context name for this link we pass context path from template7Data root
                              <a href = "/framework7/src/likes.html" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'Likes'
                                    <div class = "item-title">Likes</div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/template7" id = "about">
         <div class = "navbar">
            <div class = "navbar-inner">
               <div class = "left sliding">
                  <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
               </div>
            
               <div class = "center sliding">About Me</div>
               <div class = "right">
                  <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
               </div>
            </div>
         </div>
         
         <div class = "pages">
            <div data-page = "about" class = "page">
               <div class = "page-content">
                  <div class = "content-block">
                     <div class = "content-block-inner">
                        //displays the details of the user by using the 'my-app.js' file
                        <p>Hello, i am <b>{{firstname}} {{lastname}}</b>, 
                           <b>{{age}}</b> years old and working as 
                           <b>{{position}}</b> at <b>{{company}}</b>.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </script>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script type = "text/javascript" 
         src = "/framework7/src/js/my-app.js">
      </script>
   </body>

</html>

मेरी-app.js

// Initialize your app
var myApp = new Framework7 ({
   animateNavBackIcon: true,
   
   // Enable templates auto precompilation
   precompileTemplates: true,
   
   // Enabled rendering pages using Template7
   template7Pages: true,
   
   // Specify Template7 data for pages
   template7Data: {
      //provides the url for different page with data-page = "likes"
      'url:likes.html': {
         likes: [
            {
               title: 'Nelson Mandela',
               description: 'Champion of Freedom'
            },
            
            {
               title: 'Srinivasa Ramanujan',
               description: 'The Man Who Knew Infinity'
            },
            
            {
               title: 'James Cameron',
               description: 'Famous Filmmaker'
            }
         ]
      },
      about: {
         firstname: 'William ',
         lastname: 'Root',
         age: 27,
         position: 'Developer',
         company: 'TechShell',
      }
   }
});

// Add main View
var mainView = myApp.addView('.view-main', {
   // Enable dynamic Navbar
   dynamicNavbar: true
});

likes.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left sliding">
         <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
      </div>
      
      <div class = "center sliding">Likes</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "likes" class = "page">
      <div class = "page-content">
         <div class = "content-block-title">My Likes</div>
         <div class = "list-block media-list">
         
            //iterate through likes
            <ul>
               {{#each likes}}
                  <li class = "item-content">
                     <div class = "item-inner">
                        <div class = "item-title-row">
                           //displays the title and description by using the 'my-app.js' file
                           <div class = "item-title">{{title}}</div>
                        </div>
                        <div class = "item-subtitle">{{description}}</div>
                     </div>
                  </li>
               {{/each}}
            </ul>
         </div>
      </div>
   </div>
</div>

उत्पादन

ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -

ऊपर दिए गए HTML कोड को इस प्रकार सेव करें index.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/index.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण लिंक प्रदान करता है, जो उपयोगकर्ता जानकारी प्रदर्शित करता है जैसे कि उपयोगकर्ता विवरण, उपयोगकर्ता पसंद करता है जब आप उन लिंक पर क्लिक करते हैं।