Template7 Pages

Framework7 allows you to render your Ajax and Dynamic pages as Template7 templates with specified context and provides a lot of different ways to do that.

To make it work, first of all, we need to enable it by passing the following parameter on App initialization:

var myApp = new Framework7({
    template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});

That is all, now all of your Ajax and Dynamic pages will be rendered as Template7 templates where you may use Template7 syntax

Templates/Pages Data

Now we need to learn how to pass required data/context for specific pages. For that we may specify all pages data in additional template7Data parameter passed on App initialization. Let's look on its syntax:

var myApp = new Framework7({
    template7Pages: true, //enable Template7 rendering for pages
 
    //Specify templates/pages data
    template7Data: {
        // This context will applied for page/template with "about.html" URL
        'url:about.html': {
            name: 'John Doe',
            age: 38,
            company: 'Apple',
            position: 'Developer'
        },
 
        // This context will applied for page/template with data-page="contacts"
        'page:contacts': {
            tel: '(999)-111-22-33',
            email: '[email protected]'
        },
 
        // Plain data object
        'languages': {
            'frontend': [
                {
                    name:'JavaScript',
                    description: 'Dynamic computer programming language[5]. It is most commonly used as part of web browsers, whose implementations allow...'
                },
                {
                    name:'CSS',
                    description: 'Style sheet language used for describing the look and formatting of a document written in a markup language...'
                },
            ],
            'backend': [
                {
                    name: 'PHP',
                    description: 'Server-side scripting language designed for web development but also used as a general-purpose programming language...'
                },
                {
                    name: 'Ruby',
                    description: 'Dynamic, reflective, object-oriented, general-purpose programming language...'
                }
            ]
        }
    }
});
 
// Add and init View
var mainView = myApp.addView('.view-main');
 

Access And Modify Templates/Pages Data

We may access and modify specified template7Data in any moment. It is accessible in global Template7.data object, or in its alias myApp.template7Data

Page & URL Rules

It is everything simple here:

  • If you specify property name that starts from url: then this context will be applied for the page with specified URL

  • If you specify property name that starts from page: then this context will be applied for the page with specified page name which is in data-page attribute

It is recommended to use url: where possible because it provides more accurate detection.

But sometimes it could be impossible to use url:, for example in pages with URLs with different GET parameters (like about.html?id=1 and about.html?id=2) or for Dynamic pages. In this case we may use page: rule

So for the specified above templates data, we may use the following formatting in pages:

about.html:

<div class="page" data-page="about">
    <div class="page-content">
        <p>Hello, my name is {{name}} and i am {{age}} years old {{position}} at {{company}}</p>
    </div>
</div>

contacts.html:

         
<div class="page" data-page="contacts">
    <div class="page-content">
        <p>You can contact me:</p>
        <p>By phone: {{tel}}</p>
        <p>By email: {{email}}</p>
    </div>
</div>

Plain Data Objects

Plain data objects in templates data provide more complex and more customizable way of pages data handling. Such objects allow us to pass custom context to loaded page using usual links and special data-context-name attribute on them.

Let's look at the following example where we have index page with links to page with languages list that contains link to another detail language page:

index.html:

<div class="list-block">
  <ul>
    <li>
      <a href="languages.html" class="item-link item-content" data-context-name="languages">
          <div class="item-inner">
            <div class="item-title">Languages</div>
          </div>
      </a>
    </li>
  </ul>
</div>

languages.html:

<div class="page" data-page="languages">
  <div class="page-content">
    <div class="content-block-title">Frontend</div>
    <div class="list-block">
      <ul>
        <!-- Iterate through frontend languages -->
        {{#each this.frontend}}
        <li>
          <!-- As a context name for this link we pass context path from template7Data root -->
          <a href="language-details.html" class="item-link item-content" data-context-name="languages.frontend.{{@index}}">
              <div class="item-inner">
                <div class="item-title">{{this.name}}</div>
              </div>
          </a>
        </li>
        {{/each}}
      </ul>
    </div>
    <div class="content-block-title">Backend</div>
    <div class="list-block">
      <ul>
        <!-- Iterate through backend languages -->
        {{#each this.backend}}
        <li>
          <!-- As a context name for this link we pass context path from template7Data root -->
          <a href="language-details.html" class="item-link item-content" data-context-name="languages.backend.{{@index}}">
              <div class="item-inner">
                <div class="item-title">{{this.name}}</div>
              </div>
          </a>
        </li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>          

language-details.html:

<div class="page" data-page="language-details">
  <div class="page-content">
    <div class="content-block-title">{{name}}</div>
    <div class="content-block">
      <p>{{description}}</p>
    </div>
  </div>
</div>

So, using data-context-name link attribute we may pass required context from template7Data. As you note, it also supports context paths (usign . separator) that allow us to pass child properties.

For example, using context path we may create link to CSS language details page:

<a href="language-details.html" data-context-name="languages.frontend.1">CSS</a>

In JavaScript, we may also do the same using View's Router .load() method and contextName property:

mainView.router.load({
    url: 'language-details.html',
    contextName: 'languages.frontend.0'
})

Pass Custom Context

Framework7 allows to pass custom context to any loaded Ajax or Dynamic page.

We may pass custom context for any page using data-context attribute on link, where we need to put valid stringified JSON:

<a href='contacts.html' data-context='{"tel": "(999)-111-22-33", "email": "[email protected]"}'>Contacts</a>

Or, in JavaScript, we may pass custom context using View's Router .load() method and context property:

mainView.router.load({
    url: 'contacts.html',
    context: {
      tel: '(999)-111-22-33',
      email: '[email protected]'
    }
})

Or by specifying one of required plain data from template7Data:

mainView.router.load({
    url: 'language-details.html',
    context: Template7.data.languages.frontend[1] // CSS
})      

Load Templates Directly

If you use templates auto compilation you may render and load them on the fly as a Dynamic pages.

Let's look on another example where we just have the following page templates in index file:

<script id="contactsTemplate" type="text/template7">
  <div class="page" data-page="contacts">
    <div class="page-content">
        <p>You can contact me:</p>
        <p>By phone: {{tel}}</p>
        <p>By email: {{email}}</p>
    </div>
  </div>
</script>
 
<script id="aboutTemplate" type="text/template7">
  <div class="page" data-page="about">
    <div class="page-content">
        <p>Hell, my name is {{name}}. I am {{age}} years old:</p>
    </div>
  </div>
</script>

In our JavaScript:

var myApp = new Framework7({
    precompileTemplates: true, //
    template7Pages: true, //enable Template7 rendering for pages
    template7Data: {
        // Data for contacts page
        'page:contacts': {
              tel: '(999)-111-22-33',
              email: '[email protected]'
        }
    }
})

Now we need to load specified templates as pages.

For "contacts" page we already have required data in template7Data. So to specify required template we need to use data-template attribute where we need to specify template id:

<!-- We need to specify template id in data-template attribute -->
<a href="#" data-template="contactsTemplate">Contacts</a>

For "about" page, we don't have any specified data, so we can do that by passing custom context:

<a href="#" data-template="aboutTemplate" data-context='{"name": "John Doe", "age": "35"}'>About Me</a>

And of course, we can do the same in JavaScript using View's .load() method and template property:

//To load contacts page from template:
mainView.router.load({
    template: Template7.templates.contactsTemplate // template already compiled and available as a property of Template7.templates
})
 
//To load about page from template with custom data:
mainView.router.load({
    template: Template7.templates.aboutTemplate, // template already compiled and available as a property of Template7.templates
    context: {
        name: 'John Doe',
        age: 35
    }
})

URL Query

When using Template7 rendering for Ajax pages, its context will be always extended with special url_query property that contains URL GET parameters:

<a href="person.html?firstname=John&lastname=Doe&age=33">John Doe</a>
<a href="person.html?firstname=Mike&lastname=Doe&age=26">Mike Doe</a>

person.html

<div class="page" data-page="person">
    <div class="page-content">
        <p>Hello, my name is {{url_query.firstname}} {{url_query.lastname}}. I am {{url_query.age}} years old.</p>
    </div>
</div>