Displaying ajax data in template page - Framework7

Question

Am playing with Framework7 to do hybrid mobile app development. I have three tabs (bottom fixed), which are Home, Contacts and Settings/Profile

My app.js file looks somewhat like this:

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/'
});

And in routes.js:

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/contacts/',
    componentUrl: './pages/contacts.html',
  },
  {
    path: '/settings/',
    componentUrl: './pages/settings.html',
  }
];

This Contacts page contains static content. For the Home page, am doing the AJAX API call during the deviceready state. Because am setting up some headers for authentication and stuff(for all the AJAX api calls) in there.

The problem am facing is, am unable to display the content in Settings page. It is always empty!

Am using this in that template page:

<div class="item-title item-label">Full Name - {{$root.user_profile.full_name}}</div>

I want to compile that template only when clicking the respective tab button. Maybe that's the problem.

Any suggestions?

Answer 1

After going through the documentations again and again, I got another way to do this.

So, during the tabShow event, I check whether the user is accessing the Settings/Profile tab. If so, I check whether an object in app.data (eg: app.data.user_profile is empty or not(am storing the profile details there). If empty, I would do an AJAX API call to get the profile details. When the profile details is obtained, I would use app.form.fillFromData() method to fill the form. Documentation here: https://framework7.io/docs/form.html#form-data-app-methods

Make sure to name the form as well as the input elements in that form, and the same name should be use in the object(key name) when calling the fillFromData() function.

And one more thing, for the routes, /settings/ path, I used url instead of the componentUrl property to pass the url of the page.

This may not be the best solution, but am still learning. And it seems to have solved by current problem.

Thank you