1. WIKI教程
2. 学习Framework7
3. Templates/Pages Data

Templates/Pages Data

描述 (Description)

您可以通过在初始化应用程序时发送的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 。

页面和网址规则

page和url规则在下面简要说明 -

• 当您从url: then开始指定属性名称时，此上下文将用于页面。

• 当您从page:开始指定属性名称时，此上下文将与页面的指定名称一起使用。

建议使用url:因为它提供准确的检测。 但是，在某些情况下，无法使用url:例如，在包含具有不同GET参数的网址（如contact.html？id = 1和contact.html？id = 2）或动态网页的网页中。 在这种情况下使用page: rule。

普通数据对象

纯数据对象提供了一种以更复杂和可自定义的方式处理页面数据的方法。 这些对象允许您使用links和data-context-name属性将自定义上下文传递给已加载的页面。