How to create dynamic webpage by async route in framework7-Core?

Questions
1

Hello, I am a lawyer but I am really passionate about Information Technology, so i have self-taught and have a bit of IT knowledge. Now I want to create a small-PWApp for my work and I started working with the help of framework7. But now I’m having a bit of a problem about how to create a panel that automatically reloads data from a json file stored on the local every time we click on. Sorry for my little knowledge and bad language has bothered you. I know nothing is free but still look forward to receiving your help. This all that i tried

This is content of panel.f7.html file:

    <template>
    <div class="panel panel-left panel-cover" data-url='/left-panel/'>
    <ul>
    {{#each user.list}}    
    <li>
    <div>{{name}}</div>
    </li>
    {{/each}}
    </ul>
    </div>
    </template>

and this is content of route.js:

    import PanelPage from '../pages/panel.f7.html';
    var routes = [
    {
    path: '/left-panel/',
    async: function(routeTo, routeFrom, resolve,reject) {
    this.app.request.json('data.json', function(data) {
    resolve(
    {
    panel:{
    component: PanelPage,
    },
    },
    {
    context: {
    user:data,
    }
    }
    );
    });
    }
    },

and this is content of json file named ‘data.json’ that i want to load data from:

    data = {
    "city": "tokyo",
    "list":[
    {"name":"James",},
    {"name":"Marry",}]
    }

Thank you so much!

2

I don’t know what your result is, or if you get some error message on the console. But what I see when looking at your template, is that you are missing an opening <ul> tag?

1 Like
3

Thank you my friend, I edited my mistake.