Setting the initial layout and view when initializing the application

When working on complex mobile applications, you will have multiple layouts and views in the page. In this case, the initial view to render within a selected layout would not be possible to determine. However, options can be passed to the kendo.mobile.application function to set the layout and the initial view to use when the application is initialized.

How to do it…

Let's consider that there are two layouts and two views in the page. The layouts differ by the number of elements in tabstrip. In layout1, let's consider the header text, which reads Layout1 header and has two elements in its tabstrip:

<div
  data-role="layout"
  data-id="layout1">

  <!-- header here -->

  <footer data-role="footer">

    <div data-role="tabstrip">

      <a data-icon="about">About</a>

      <a data-icon="settings">Settings</a>

    </div>

  </footer>
</div>

In the same page...