❮ Framework7 Template7 页面 Framework7 Template7 页面 ❯

Framework7 - 模板/页面数据

更新于 2025/1/9 6:22:17

描述

您可以通过在初始化应用时发送的 template7Data 参数中指定所有页面数据来传递特定页面所需的数据/上下文，如下所示 −

// 初始化您的应用
var myApp = new Framework7 ({
    animateNavBackIcon: true,
    
    // 启用模板自动预编译
    precompileTemplates: true,
    
    // 使用 Template7 启用渲染页面
    template7Pages: true,
    
    // 为页面指定 Template7 数据
    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'
            }
         ]
      },

      // 将应用于 data-page = "contacts" 的页面/模板
      'page:contacts': {
        tel: '+1-541-754-3010',
        email: 'william@root.com',
        country: 'Canada',
      },
    
      // 只是普通的数据对象，可以使用
      //data-context-name 属性传递给其他页面
      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: 规则。