Router Component

    Router Component is a special type of content that can be loaded by Router when we specify route content using component or componentUrl properties.

    It should help to better structure our apps, keep things in appropriate place, and make many things quicker and in a more clear and comfortable way.

    Component Structure

    If you know what is Vue component, then it will be much easier to understand as it looks pretty similar. Router Component is basically an object with the following properties (all properties are optional):

    Property Type Description
    template string Template7 template string. Will be compiled as Template7 template
    render function Render function to render component. Must return full html string or HTMLElement
    data function Component data, function must return component context data
    style string Component CSS styles. Styles will be added to the document after component will be mounted (added to DOM), and removed after component will be destroyed (removed from the DOM)
    methods object Object with additional component methods which extend component context
    on object Object with page events handlers
    Lifecycle Hooks
    beforeCreate function Called synchronously immediately after the component has been initialized, before data and event/watcher setup.
    created function Called synchronously after the component is created, context data and methods are available and component element $el is also created and available
    beforeMount function Called right before component will be added to DOM
    mounted function Called right after component was be added to DOM
    updated function Called right after component VDOM has been patched
    beforeDestroy function Called right before component will be destoyed
    destroyed function Called when component destroyed

    All lifecycle hooks and methods automatically have their this context bound to the component context, so that you can access component data and methods. This means you should not use an arrow function to define a lifecycle method (e.g. created: () => this.doSomething()). The reason is arrow functions bind the parent context, so this will not be the component instance as you expect and this.doSomething will be undefined.

    So the example route with page component may look like:

    routes = [
      // ...
      {
        path: '/some-page/',
        // Component Object
        component: {
          template: `
            <div class="page">
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="title">{{title}}</div>
                </div>
              </div>
              <div class="page-content">
                <a @click="openAlert" class="red-link">Open Alert</a>
                <div class="list simple-list">
                  <ul>
                    {{#each names}}
                      <li>{{this}}</li>
                    {{/each}}
                  </ul>
                </div>
              </div>
            </div>
          `,
          style: `
            .red-link {
              color: red;
            }
          `,
          data: function () {
            return {
              title: 'Component Page',
              names: ['John', 'Vladimir', 'Timo'],
            }
          },
          methods: {
            openAlert: function () {
              var self = this;
              self.$app.dialog.alert('Hello world!');
            },
          },
          on: {
            pageInit: function (e, page) {
              // do something on page init
            },
            pageAfterOut: function (e, page) {
              // page has left the view
            },
          }
        },
      },
      // ...
    ]

    Component Context

    As we said above, all component methods and Template7 compiler are executed in the context of the component.

    Component context is the object you have returned in component's data and methods from specified methods object, but also extended with the following useful properties:

    Property Type Desctiption
    $el object Dom7 instance with component HTML element
    this.$el.find('p').addClass('red')
    $
    $$
    $dom7
    function Dom7 library:
    this.$$('p').text('hello world')
    $app object Framework7 app instance
    this.$app.dialog.alert('Hello world!')
    $root object Root data and methods you have specified in data and methods properties on app init
    var app = new Framework7({
      // root data
      data: function () {
        return {
          username: 'johndoe'
        }
      },
      // root methods
      methods: {
        helloWorld: function () {
          app.dialog.alert('Hello world!');
        }
      }
    });
    
    // then in component:
    console.log(this.$root.username); // -> 'johndoe';
    
    this.$root.helloWorld(); // -> call alert
    $route object Current route. Contains object with route query, hash, params, path and url
    $router Router instance Related router instance
    this.$router.back(); //navigate back
    $theme object Object with md and ios boolean properties which indicating current theme. For example:
    if (this.$theme.ios) { /* do something when iOS theme is active */ }
    if (this.$theme.md) { /* do something when MD theme is active */ }
    $setState() function

    Component method where you pass mergeState object that will be merged with current component state. It is the method that tells to component that its state has been changed and it must be rerendered. It launches the process of VDOM comparison and patching of necessary elements and attributes in real DOM.

    Such mechanism is similar to React's approach and its method. It allows to control rendering and avoid unnecessary renders.

    Note, that direct assignment to component state won't trigger layout update. If we use this.foo = 'bar' it will not be updated. Use $setState() whenever you need to update component layout!

    Component Page Events

    Component page events handlers can be passed in on component property. They are usual DOM Page Events. Because they are DOM events, they accept event as first agrument, and Page Data as second argument. There only difference with usual DOM events is that their context (this) bound to component context and event handler name must be specified in camelCase format (page:init -> pageInit):

    ...
    data: function () {
      return {
        username: 'johndoe',
      };
    },
    on: {
      pageMounted: function (e, page) {
        console.log('page mounted');
      },
      pageInit: function (e, page) {
        console.log(this.username); // -> 'johndoe'
      },
      pageBeforeIn: function (e, page) {
        console.log('page before in');
      },
      pageAfterIn: function (e, page) {
        console.log('page after in');
      },
      pageBeforeOut: function (e, page) {
        console.log('page before out');
      },
      pageAfterOut: function (e, page) {
        console.log('page after out');
      },
      pageBeforeUnmount: function (e, page) {
        console.log('page before unmount');
      },
      pageBeforeRemove: function (e, page) {
        console.log('page before remove');
      },
    }

    DOM Events Handling

    Note that additional @ attribute in component template. It is a shorthand method to assign event listener to the specified element. Specified event handler will be searched in component methods.

    Such event handlers are processed only on initial rendering, or for elements patched with VDOM. If you add such element to DOM manually it won't work!

    {
      // ...
      methods: {
        onClick: function() {
          // ...
        }
      },
      on: {
        pageInit: function (page) {
          // this won't work
          page.$el.append('<a @click="onClick">Link</a>');
        }
      }
    }

    Component Root Element

    Component template or render function must return only single HTML element. And it must be an element that is supported by router:

    • If you load pages as router component then router component must return Page element:

      <template>
        <div class="page">
          ...
        </div>
      </template>

    • If you load modal (Routable Modals) as router component then router component must return that modal element:

      <template>
        <div class="popup">
          ...
        </div>
      </template>

    • If you load panel (Routable Panels) as router component then router component must return Panel element:

      <template>
        <div class="panel panel-left panel-cover">
          ...
        </div>
      </template>

    • If you load tab content (Routable Tabs) as router component then router component must return Tab's child element that will be inserted inside of routable Tab:

      <template>
        <div class="some-element">
          ...
        </div>
      </template>
      

    Single File Component

    It is not very comfortable to specify all component routes under same routes array, especially if we have a lot of such routes. This is why we can use componentUrl instead and out component into single file:

    routes = [
      ...
      {
        path: '/some-page/',
        componentUrl: './some-page.html',
      },
      ..
    ];

    And in some-page.html:

    <!-- component template -->
    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">{{title}}</div>
          </div>
        </div>
        <div class="page-content">
          <a @click="openAlert">Open Alert</a>
          <div class="list simple-list">
            <ul>
              {{#each names}}
                <li>{{this}}</li>
              {{/each}}
            </ul>
          </div>
        </div>
      </div>
    </template>
    <!-- component styles -->
    <style>
      .red-link {
        color: red;
      }
    </style>
    <!-- rest of component data and methods -->
    <script>
      // script must return component object
      return {
        data: function () {
          return {
            title: 'Component Page',
            names: ['John', 'Vladimir', 'Timo'],
          }
        },
        methods: {
          openAlert: function () {
            var self = this.$app.dialog.alert('Hello world!');
          },
        },
        on: {
          pageInit: function () {
            // do something on page init
          },
          pageAfterOut: function () {
            // page has left the view
          },
        }
      }
    </script>

    Well, now it is much cleaner. The <template> and <style> tags will be automatically converted to the same properties of exported component.

    You may think that it is not valid to have a direct return statement in script, but it is ok because parser puts the content of the script tag into function body.

    ES Template Literals

    The feature available from Framework7 version 3.1.0.

    When we use single file component, the everything what is under <template> tag is compiled as Template7 template. In some situations it may bring more complexity, if you need to do a lot of complex checks and modifications right in the template. With Template7 you may need to register a bunch of helpers.

    So single file component template can be treated as native JavaScript Template literal.

    Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

    var a = 5;
    var b = 10;
    console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
    

    To enable your component template being treated as template literal we need to add es attribute to <template> tag. The template from previous example will look like:

    <template es>
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">${this.title}</div>
          </div>
        </div>
        <div class="page-content">
          <a @click="openAlert">Open Alert</a>
          <div class="list simple-list">
            <ul>
              ${this.names.map((name) => `
                <li>${name}</li>
              `).join('')}
            </ul>
          </div>
        </div>
      </div>
    </template>
    

    Scoped Styles

    In case you want to scope component styles in single file component to this component only, you may add scoped attribute to component <style> tag:

    <template>
      <!-- component template -->
    </template>
    
    <!-- style has additional "scoped" attribute -->
    <style scoped>
      p {
        color: red;
      }
      a {
        text-decoration: none;
      }
    </style>
    
    <script>
      return {
        ...
      }
    </script>

    When scoped style added component element will have additional data-scope="[unique_id]" where [unique_id] is the unique timestamp. And all styles will be refactored to have this unique scope id, for example:

    [data-scope="1515740589328"] p {
      color: red;
    }
    [data-scope="1515740589328"] a {
      text-decoration: none;
    }

    In case you need to use more complex selector with including component parent reference, then you may use {{this}} keword to reference the component:

    <template>
      <!-- component template -->
    </template>
    
    <!-- style has additional "scoped" attribute -->
    <style scoped>
      /* all paragraphs in this component will be red under iOS theme */
      html.ios {{this}} p {
        color: red;
      }
      /* all paragraphs in this component will be green under MD theme */
      html.md {{this}} p {
        color: green;
      }
    </style>
    
    <script>
      return {
        ...
      }
    </script>

    Usage With WebPack

    There is a special framework7-component-loader for WebPack that allows to bundle Single-File Components into main bundle and not to use XHR (e.g. componentUrl) to load and parse component files each time.

    This loader parses Single-File component's file and transforms it to plain JS object during bundling process. So, potentially, it can increase app performance because there won't be runtime parsing and compilation.

    When this loader is configured, we need to store Single-File components in .f7.html files and use export default for component export:

    <template>
      <div class="page">
        ...
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            foo: 'bar',
          }
        },
        methods: {
          doThis() {
            // ...
          }
        }
      }
    </script>

    It also possible to import required dependencies and styles:

    <template>
      <div class="page">
        ...
      </div>
    </template>
    <script>
      import './path/to/some-styles.css';
      import utils from './path/to/utils.js';
    
      export default {
        data() {
          return {
            foo: 'bar',
            now: utils.now(),
          }
        },
        methods: {
          doThis() {
            // ...
          }
        }
      }
    </script>

    And then we can import it and add to routes:

    // routes.js
    
    import NewsPages from './path/to/news.f7.html';
    import ServicePages from './path/to/services.f7.html';
    
    export default [
      {
        path: '/news/',
        component: NewsPages,
      },
      {
        path: '/services/',
        component: ServicesPages,
      }
    ]

    Virtual DOM

    Virtual DOM and all VDOM related features available from Framework7 version 3.1.0.

    The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM. It allows us to express our application's view as a function of its state.

    VDOM library called Snabbdom because it is extremely lightweight, fast and fits great for Framework7 environment.

    So how does Framework7 router component VDOM rendering works? Component template is converted to VDOM instead of directly inserting to DOM. Later, when component state changes, it creates new VDOM and compares it with previous VDOM. And based on that diff it patches real DOM by changing only elements and attributes that need to be changed. And all this happens automatically!

    Let's look at that user profile component example that will auto update layout when we request user data:

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Profile</div>
          </div>
        </div>
        <div class="page-content">
          {{#if user}}
          <!-- Show user list when it is loaded -->
          <div class="list simple-list">
            <ul>
              <li>First Name: {{user.firstName}}</li>
              <li>Last Name: {{user.lastName}}</li>
              <li>Age: {{user.age}}</li>
            </ul>
          </div>
          {{else}}
          <!-- Otherwise show preloader -->
          <div class="block block-strong text-align-center">
            <div class="preloader"></div>
          </div>
          {{/if}}
        </div>
      </div>
    </template>
    <script>
      return {
        data: function () {
          return {
            // empty initial user data
            user: null,
          }
        },
        on: {
          pageInit: function () {
            var self = this;
            var app = self.$app;
            // request user data on page init
            app.request.get('http://api.website.com/get-user-profile', (user) => {
              // update component state with new state
              self.$setState({
                user: user,
              });
            });
          },
        },
      };
    </script>

    Note, that direct assignment to component state won't trigger layout update. And if we in previous example used this.user = user it wouldn't be updated. Use $setState whenever you need to update component layout!

    Keys in Lists & Auto-Init Components

    When VDOM is updating a list of elements, by default it uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, it will patch each element in-place and make sure it reflects what should be rendered at that particular index.

    This default mode is efficient, but only suitable when your render output does not rely on child component state or temporary DOM state (e.g. form input values).

    To give VDOM a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item.

    When rendering lists, an ideal value for key would be the unique id of each item:

    <template>
      ...
      <ul>
        {{#each items}}
        <li key="{{this.id}}">...</li>
        {{/each}}
      </ul>
      ...
    </template>
    <script>
      return {
        data: function () {
          return {
            items: [
              {
                id: 1,
                title: 'Item A'
              },
              {
                id: 2,
                title: 'Item B'
              },
            ]
          }
        }
      }
    </script>
    

    Same with auto-initialized components like Range Slider, Gauge and others that should be automatically initialized (if they have range-slider-init, gauge-init) when they added to DOM, and automatically destroyed when they removed from DOM. So such elements must be also indentified with unique keys.

    <template>
      <div class="page">
        ...
        <div class="page-content">
          {{#if gaugeVisible}}
          <!-- must have unique key -->
          <div key="gauge" class="gauge gauge-init" data-type="circle"
            data-value="0.60"
            data-value-text="60%"
            data-value-text-color="#ff9800"
            data-border-color="#ff9800"
          ></div>
          {{/if}}
          ...
          <a href="#" class="button" @click="showGauge">Show Gauge</a>
        </div>
      </div>
    </template>
    <script>
      return {
        data: function () {
          return {
            gaugeVisible: false,
          }
        },
        methods: {
          showGauge: function () {
            this.$setState({
              gaugeVisible: true
            })
          },
        }
      }
    </script>
    • Note that key attribute must be unique accross single component.
    • If key attribute was not specified and element has an id attribute, then id attribute will be used as virtual node unique key.