Framework7 – Infinite Scroll

Framework7 – Infinite Scroll ”; Previous Next Description The Infinite Scroll allows you to load additional content and performs the required actions when the page is near to the bottom. The following HTML layout shows the infinite scroll − <div class = “page”> <div class = “page-content infinite-scroll” data-distance = “100”> … </div> </div> The above layout contains the following classes − page-content infinite-scroll − It is used for infinite scroll container. data-distance − This attribute allows you to configure distance from the bottom of page (in px) to trigger infinite scroll event and its default value is 50px. If you want to use infinite scroll on top the page, you need to add additional “infinite-scroll-top” class to “page-content” − <div class = “page”> <div class = “page-content infinite-scroll infinite-scroll-top”> … </div> </div> Infinite Scroll Events infinite − It is used to trigger when page scroll reaches specified distance to the bottom. It will be target by div class = “page-content infinite-scroll”. There are two App”s methods that can be used with infinite scroll container − To add infinite scroll event listener to the specified HTML container, use the following method − myApp.attachInfiniteScroll(container) You can remove the infinite scroll event listener from the specified HTML container by using the following method − myApp.detachInfiniteScroll(container) Where parameters are required options used as HTMLElement or string for infinite scroll container. Example The following example demonstrates the infinite scroll that loads the additional content when the page scroll is near to the bottom − <!DOCTYPE html> <html> <head> <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>infinite_scroll</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 = “left”> </div> <div class = “center sliding”>Infinite Scroll</div> <div class = “right”> </div> </div> </div> <div class = “pages navbar-through”> <div data-page = “home” class = “page”> <div class = “page-content infinite-scroll”> <div class = “list-block”> <ul> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 1</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 2</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 3</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 4</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 5</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 6</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 7</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 8</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 9</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 10</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 11</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 12</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 13</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 14</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 15</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 16</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 17</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 18</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 19</div> </div> </li> <li class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Item 20</div> </div> </li> </ul> </div> <div class = “infinite-scroll-preloader”> <div class = “preloader”></div> </div> </div> </div> </div> </div> </div> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script> <style> .infinite-scroll-preloader { margin-top:-20px; margin-bottom:10px; text-align:center; } .infinite-scroll-preloader .preloader { width:34px; height:34px; } </style> <script> var myApp = new Framework7(); var $$ = Dom7; // Loading flag var loading = false; // Last loaded index var lastIndex = $$(”.list-block li”).length; // Max items to load var maxItems = 60; // Append items per load var itemsPerLoad = 20; // Attach ”infinite” event handler $$(”.infinite-scroll”).on(”infinite”, function () { // Exit, if loading in progress if (loading) return; // Set loading flag loading = true; // Emulate 1s loading setTimeout(function () { // Reset loading flag loading = false; if (lastIndex >= maxItems) { // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings myApp.detachInfiniteScroll($$(”.infinite-scroll”)); // Remove preloader $$(”.infinite-scroll-preloader”).remove(); return; } // Generate new items HTML var html = ””; for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) { html += ”<li class = “item-content”> <div class = “item-inner”> <div class = “item-title”> Item ” + i + ” </div> </div> </li>”; } // Append new items $$(”.list-block ul”).append(html); // Update last loaded index lastIndex = $$(”.list-block li”).length; }, 1000); }); </script> </body> </html> Output Let us carry out the following steps to see how the above given code works − Save the above given HTML code as infinite_scroll.html file in your server root folder. Open this HTML file as http://localhost/infinite_scroll.html and the output is displayed as shown below. The example allows loading of additional content when your page scroll reaches specified distance to the bottom. Print Page Previous Next Advertisements ”;

Framework7 – Discussion

Discuss Framework7 ”; Previous Next Framework7 is a free and open source framework for mobile HTML. It is used for developing hybrid mobile apps or web apps for iOS and Android devices. This tutorial will teach you basic Framework7 and will also take you through some detailed concepts. Print Page Previous Next Advertisements ”;

Framework7 – Touch Ripple

Framework7 – Touch Ripple ”; Previous Next Description Touch Ripple is an effect that is supported only in Framework7 material theme. By default, it is enabled in material theme and you can disable it by using the materialRipple:false parameter. Ripple Elements You can enable the ripple elements to match some CSS selectors such as − ripple a.link a.item-link .button .tab-link .label-radio .label-checkbox etc. These are specified in the materialRippleElements parameter. You need to enable the touch ripple, add the element”s selector to materialRippleElements parameter to make use of ripple effect, or just use the ripple class. Ripple Wave Color The color of the ripple can be changed on the element by adding the ripple-[color] class to the element. For instance − <a href = “#” class = “button ripple-orange”>Ripple Button</a> or you can define the ripple wave color by using the CSS as shown below − .button .ripple-wave { background-color: #FFFF00; } Disable Ripple Elements You can disable the ripple for some specified elements by adding the no-ripple class to those elements. For instance − <a href = “#” class = “button no-ripple”>Ripple Button</a> Print Page Previous Next Advertisements ”;

Framework7 – Swiper Slider

Framework7 – Swiper Slider ”; Previous Next Description The swiper slider is the most powerful and modern touch slider and comes into Framework7 with lots of features. The following HTML layout shows the swiper slider − <!– Container class for slider –> <div class = “swiper-container”> <!– Wrapper class for slider –> <div class = “swiper-wrapper”> <!– Slides –> <div class = “swiper-slide”>Slide 1</div> <div class = “swiper-slide”>Slide 2</div> <div class = “swiper-slide”>Slide 3</div> … other slides … </div> <!– Define pagination, if it is required –> <div class = “swiper-pagination”></div> </div> The following classes are used for swiper slider − swiper-container − It is a required element for main slider container and it is used for slides and paginations. Swiper-wrapper − It is a required element for additional wrapper slides. swiper-slide − It is a single slide element and it could contain any HTML inside. swiper-pagination − It is optional for pagination bullets and those are created automatically. You can initialize the swiper with JavaScript using its related methods − myApp.swiper(swiperContainer,parameters) OR new Swiper(swiperContainer, parameters) Both the methods are used to initialize the slider with options. The above given methods contain the following parameters − swiperContainer − It is HTMLElement or string of a swiper container and it is required. parameters − These are optional elements containing object with swiper parameters. For example − var mySwiper = app.swiper(”.swiper-container”, { speed: 400, spaceBetween: 100 }); It is possible to access a swiper”s instance and the swiper property of the slider”s container has the following HTML element − var mySwiper = $$(”.swiper-container”)[0].swiper; // Here you can use all slider methods like: mySwiper.slideNext(); You can see the different ways and types of swiper in the following table − S.No Swiper Types & Description 1 Default Swiper With Pagination It is a modern touch slider and the swiper swipes horizontally, by default. 2 Vertical Swiper This one also works as a default swiper but it swipes vertically. 3 With Space Between Slides This swiper is used to give space between two slides. 4 Multiple Swipers This swiper uses more than one swipers on a single page. 5 Nested Swipers It is the combination of vertical and horizontal slides. 6 Custom Controls It is used for custom controls to choose or swipe any slide. 7 Lazy Loading It can be used for multimedia file, which takes time to load. Print Page Previous Next Advertisements ”;

Framework7 – Buttons

Framework7 – Buttons ”; Previous Next Description Framework7 provides a group of ready to use buttons by just adding appropriate classes to links or input buttons. S.No Types & Description 1 iOS Theme Buttons Framework7 provides many iOS theme buttons, which can be used by applying appropriate classes. 2 Material Theme Buttons The material theme provides many buttons to use in your application by using appropriate classes. Print Page Previous Next Advertisements ”;

Framework7 – Tap Hold Event

Framework7 – Tap Hold Event ”; Previous Next Description The Tap hold event is used to trigger (enable) after a sustained and complete the touch event so only, it is called tap hold event. The Tab Hold is a built-in Fast Clicks library. The following parameters are used to disable or enable and configured by default − S.No Parameter & Description Type Default 1 tapHold To enable tap hold events when it is set to true. boolean false 2 tapHoldDelay It specifies the duration of holding the tap before triggering taphold event on the target element. number 750 3 tapHoldPreventClicks The tap hold event will not be fired after clicking the event. boolean true The following code is used for enable tap hold events − var myApp = new Framework7 ({ tapHold: true //enable tap hold events }); var $$ = Dom7; $$(”.some-link”).on(”taphold”, function () { myApp.alert(”Tap hold fired!”); }); Print Page Previous Next Advertisements ”;

Framework7 – Template7 Pages

Framework7 – Template7 Pages ”; Previous Next Description Template7 is a mobile-first JavaScript template engine with handlebars.js like syntax. It is ultra lightweight and blazing-fast default template engine in Framework7. First, we need to pass the following parameter on app initialization that renders all Ajax and dynamic pages as Template7 template − var myApp = new Framework7 ({ template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages }); S.No Template7 Pages Usage & Description 1 Templates/Pages Data You can pass the required data/context for specific pages by specifying all pages data in template7Data parameter, sent on initializing an App. 2 Pass Custom Context Framework7 allows you to pass custom context to any dynamic page or any loaded Ajax. 3 Load Templates Directly You can render and load templates on fly as dynamic pages. 4 URL Query If you are using Template7 for rendering Ajax pages, its context always will be extended with special property url_query. Example The following example provides the links, which displays the user information such as user details, user likes, etc. when you click on those links. 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> my-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> Output Let us carry out the following steps to see how the above given code works − Save the above given HTML code as index.html file in your server root folder. Open this HTML file as http://localhost/index.html and the output is displayed as shown below. The example provides the links, which displays the user information such as user details, user likes when you click on those links. Print Page Previous Next Advertisements ”;

Framework7 – Lazy Load

Framework7 – Lazy Load ”; Previous Next Description Lazy loading delays your image loading process on a given page. Lazy loading improves scrolling performance, speeds page load and saves traffic. Lazy load elements and images must be inside of scrollable <div class = “page-content”> to work properly. The following table demonstrates the use of lazy load − S.No Lazy load usage & Description 1 Usage The lazy load can be applied to images, background images and with fade-in effect. 2 Init Lazy Load Manually After initializing a page, if you add lazy load images manually then, lazy load will not work and you need to use methods to initialize it. It is possible to trigger image loading manually by using lazy event on lazy image/element as shown below − $$(”img.lazy”).trigger(”lazy”); $$(”div.lazy”).trigger(”lazy”); Example The following example demonstrates the use of lazy loading in Framework7 − <!DOCTYPE html> <html class = “with-statusbar-overlay”> <head> <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>Lazy Load</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 = “pages”> <div data-page = “home” class = “page navbar-fixed”> <div class = “navbar”> <div class = “navbar-inner”> <div class = “left”> </div> <div class = “center”>Lazy Load</div> <div class = “right”> </div> </div> </div> <div class = “page-content”> <div class = “content-block”> <div class = “content-block-inner”> <p> <img data-src = “/framework7/images/pic4.jpg” width = “100%” class = “lazy lazy-fadeIn”></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p> <img data-src = “/framework7/images/pic5.jpg” width = “100%” class = “lazy lazy-fadeIn”></p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <p> <img data-src = “/framework7/images/background.jpg” width = “100%” class = “lazy lazy-fadeIn”></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p> <img data-src = “/framework7/images/pic6.jpg” width = “100%” class = “lazy lazy-fadeIn”></p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <p> <img data-src = “/framework7/images/pic7.jpg” width = “100%” class = “lazy lazy-fadeIn”></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p> <img data-src = “/framework7/images/pic8.jpg” width = “100%” class = “lazy lazy-fadeIn”></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus. Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est sem gravida lectus, sed imperdiet sapien risus ut neque.</p> <p><b>Using as background image:</b></p> <div data-background = “/framework7/images/pic7.jpg” style = “background: #aaa; height:60vw; background-size-cover” class = “lazy lazy-fadeIn”> </div> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> </div> </div> </div> </div> </div> </div> </div> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script> <script>var myApp = new Framework7();</script> </body> </html> Output Let us carry out the following steps to see how the above given code works − Save the above given HTML code as framework7_lazy_load.html file in your server root folder. Open this HTML file as http://localhost/framework7_lazy_load.html and the output is displayed as shown below. The example specifies the lazy load of images where images will get loaded on the page when you scroll them down. Print Page Previous Next Advertisements ”;

Framework7 – Hairlines

Framework7 – Hairlines ”; Previous Next Description Hairline is a class that adds 1px border around the images by using the border class. With the release of 1.x, hairlines revised the working with :after and :before pseudo elements instead of using CSS borders. Hairlines contains the following rules − :after − This pseudo element is used for bottom and right hairlines. :before − This pseudo element is used for top and left hairlines. The following code snippet shows the use of :after element. .navbar:after { background-color: red; } The following code snippet removes the bottom hairline toolbar − .navbar:after { display:none; } .toolbar:before { display:none; } “no-border” class The hairline will be removed by using no-border class and it is supported on Navbar, toolbar, card and its elements. The following code is used to remove hairline from navbar − <div class = “navbar no-border”> … </div> Print Page Previous Next Advertisements ”;

Framework7 – Auto Compilation

Framework7 – Auto Compilation ”; Previous Next Description In Template7 you can compile your templates automatically by specifying special attributes in a <script> tag. The following code shows the auto compilation layout − <script type = “text/template7” id = “myTemplate”> <p>Hello, my name is {{name}} and i am {{age}} years old</p> </script> You can use the following attributes for initializing the auto compilation − type = “text/template7” − It is used to tell Template7 to auto compile and it is a required script type. id = “myTemplate” − Template is accessible through the id and it is a required template id. For automatic compilation, you need to enable app initialization by passing the following parameter − var myApp = new Framework7 ({ //It is used to compile templates on app init in Framework7 precompileTemplates: true, }); Template7.templates / myApp.templates The automatically compiled templates can be accessed as properties of Template7.templates after initializing the app. It is also known as myApp.templates where myApp is an initialized instance of the app. You can use the following templates in our index.html file − <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> You can also access templates in JavaScript after app initialization − 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 }); Print Page Previous Next Advertisements ”;