- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Templates/Pages Data
Description
You can pass the required data/context for specific pages by specifying all pages data in template7Data parameter sent on initializing an App as shown below −
// 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: { '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' } ] }, // Will be applied for page/template with data-page = "contacts" 'page:contacts': { tel: '+1-541-754-3010', email: 'william@root.com', country: 'Canada', }, // Just plain data object which can be passed for other pages using //data-context-name attribute cars: [ { brand: 'Audi', model: 'Q73', fuel_type: 'Diesel', top_speed: 234, seating: 7, color: 'white', price: 54800, }, { brand: 'Porsche', model: 'Cayen', fuel_type: 'Diesel', top_speed: 230, seating: 5, color: 'black', price: 84800, }, { brand: 'BMW', model: 'X6', fuel_type: 'Diesel', top_speed: 270, seating: 5, color: 'blue', price: 54400, }, { brand: 'Toyota', model: 's3', fuel_type: 'Diesel', top_speed: 204, seating: 7, color: 'white', price: 45800, }, ], 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 });
You can access and modify any template7Data data in any moment. The template7Data is accessible in global object Template7.data or in its alias myApp.template7Data.
Page & URL Rules
The page and url rules are explained briefly below −
When you specify the property name starting from url: then, this context will be used for the page.
When you specify the property name starting from page: then, this context will be used with specified name of the page.
It is suggested to use url: as it provides accurate detection. However, in some cases, it is impossible to use url:, for instance, in pages with URLs having distinct GET parameters (like contact.html?id = 1 and contact.html?id = 2) or for dynamic pages. In such a case use the page: rule.
Plain Data Objects
The plain data objects provide a way to handle your pages data in more complex and customizable manner. These objects allow you to pass custom context to loaded page by using links and data-context-name attribute.