title: Displaying ajax data in template page - Framework7
body: <p>Am playing with Framework7 to do hybrid mobile app development. I have three tabs (bottom fixed), which are <code>Home</code>, <code>Contacts</code> and <code>Settings/Profile</code></p>
  
  <p>My <code>app.js</code> file looks somewhat like this:</p>
  
  <pre><code>var $$ = Dom7;
  
  var app  = new Framework7({
  
      //.....
  
      data: function () {
          return {
              user_profile : ''               
          }
      },
  
      on: {
          tabShow( tab )  //-- when a bottom tab is clicked
          {               
              if( $$(tab).attr('id') == 'view-settings' )
              {
                  //.. do ajax call and get the response data in "resp"
  
                  app.data.user_profile = resp.response.profile;  //setting the info to app's data
  
              }           
          }
      },
  
      routes: routes
  });
  
  var settingsView = app.views.create('#view-settings', {
      url: '/settings/'
  });
  </code></pre>
  
  <p>And in <code>routes.js</code>:</p>
  
  <pre><code>routes = [
    {
      path: '/',
      url: './index.html',
    },
    {
      path: '/contacts/',
      componentUrl: './pages/contacts.html',
    },
    {
      path: '/settings/',
      componentUrl: './pages/settings.html',
    }
  ];
  </code></pre>
  
  <p>This <strong>Contacts</strong> page contains static content. For the <strong>Home</strong> page, am doing the AJAX API call during the <code>deviceready</code> state. Because am setting up some headers for authentication and stuff(for all the AJAX api calls) in there.</p>
  
  <p>The problem am facing is, am unable to display the content in <strong>Settings</strong> page. It is always empty!</p>
  
  <p>Am using this in that template page:</p>
  
  <pre><code>&lt;div class="item-title item-label"&gt;Full Name - {{$root.user_profile.full_name}}&lt;/div&gt;
  </code></pre>
  
  <p>I want to compile that template only when clicking the respective tab button.
  Maybe that's the problem.</p>
  
  <p>Any suggestions?</p>