Modèles / Données de pages

La description

Vous pouvez transmettre les données / contexte requis pour des pages spécifiques en spécifiant toutes les données de pages dans le paramètre template7Data envoyé lors de l'initialisation d'une application, comme indiqué ci-dessous -

// 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: '[email protected]',
         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
});

Vous pouvez accéder et modifier toutes les données template7Data à tout moment. Le template7Data est accessible dans l'objet global Template7.data ou dans son alias myApp.template7Data .

Règles de page et d'URL

La page et les règles d' URL sont expliquées brièvement ci-dessous -

• Lorsque vous spécifiez le nom de la propriété à partir de url: puis, ce contexte sera utilisé pour la page.

• Lorsque vous spécifiez le nom de la propriété à partir de page: puis, ce contexte sera utilisé avec le nom spécifié de la page.

Il est suggéré d'utiliser url:car il fournit une détection précise. Cependant, dans certains cas, il est impossible d'utiliserurl:, par exemple, dans les pages avec des URL ayant des paramètres GET distincts (comme contact.html? id = 1 et contact.html? id = 2) ou pour les pages dynamiques. Dans un tel cas, utilisez lepage: règle.

Objets de données simples

Les objets de données simples permettent de gérer les données de vos pages de manière plus complexe et personnalisable. Ces objets vous permettent de transmettre un contexte personnalisé à la page chargée à l'aide de liens et de l' attribut data-context-name .