Framework7-templates-data

テンプレート/ページデータ

説明

以下に示すように、アプリケーションの初期化時に送信される_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:likesl': {
         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
});

_template7Data_データにいつでもアクセスして変更できます。 _template7Data_は、グローバルオブジェクト_Template7.data_またはそのエイリアス_myApp.template7Data_でアクセスできます。

ページとURLルール

_page_および_url_ルールについては、以下で簡単に説明します-

• * url：*から始まるプロパティ名を指定すると、このコンテキストがページに使用されます。
• * page：*から始まるプロパティ名を指定すると、指定されたページ名でこのコンテキストが使用されます。

正確な検出を提供するため、* url：を使用することをお勧めします。 ただし、 url：を使用できない場合もあります。たとえば、URLが異なるGETパラメーター（contactl？id = 1やcontactl？id = 2など）を持つページや動的ページでは使用できません。 このような場合、 page：*ルールを使用します。

プレーンデータオブジェクト

プレーンデータオブジェクトは、ページデータをより複雑でカスタマイズ可能な方法で処理する方法を提供します。 これらのオブジェクトを使用すると、リンクと_data-context-name_属性を使用して、ロードされたページにカスタムコンテキストを渡すことができます。