模板/頁面資料

描述

您可以透過在初始化應用程式時指定的template7Data引數中指定所有頁面資料來傳遞特定頁面所需的資料/上下文，如下所示：

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

您可以隨時訪問和修改任何template7Data資料。template7Data可在全域性物件Template7.data或其別名myApp.template7Data中訪問。

頁面 & URL 規則

下面簡要解釋了page和url規則：

• 當您指定的屬性名稱以url:開頭時，此上下文將用於該頁面。

• 當您指定的屬性名稱以page:開頭時，此上下文將與指定的頁面名稱一起使用。

建議使用url:，因為它可以提供準確的檢測。但是，在某些情況下，無法使用url:，例如，在URL具有不同的GET引數（如contact.html?id = 1和contact.html?id = 2）的頁面或動態頁面中。在這種情況下，請使用page:規則。

普通資料物件

普通資料物件提供了一種更復雜和可定製的方式來處理您的頁面資料。這些物件允許您使用連結和data-context-name屬性將自定義上下文傳遞到載入的頁面。