javascript - 在模板页面中显示ajax数据 - Framework7

Question

正在使用 Framework7 进行混合移动应用程序开发。我有三个选项卡(底部固定)，分别是 Home、Contacts 和 Settings/Profile

我的 app.js 文件看起来有点像这样:

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

在routes.js中:

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

此联系人页面包含静态内容。对于主页页面，我在deviceready状态期间执行AJAX API调用。因为我正在设置一些用于身份验证的 header 和其中的内容(用于所有 AJAX api 调用)。

我面临的问题是，无法显示设置页面中的内容。它总是空的!

我在该模板页面中使用它:

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

我只想在单击相应的选项卡按钮时编译该模板。 也许这就是问题所在。

有什么建议吗？

Answer 1

在一遍又一遍地查看文档后，我找到了另一种方法来做到这一点。

因此，在 tabShow 事件期间，我检查用户是否正在访问设置/个人资料选项卡。如果是这样，我检查 app.data 中的对象(例如:app.data.user_profile)是否为空(在那里存储个人资料详细信息)。如果为空，我会执行 AJAX API 调用来获取个人资料详细信息。获取个人资料详细信息后，我将使用 app.form.fillFromData() 方法来填写表单。此处的文档:https://framework7.io/docs/form.html#form-data-app-methods

确保为表单以及该表单中的输入元素命名，并且在调用 fillFromData() 函数时，应在对象(键名称)中使用相同的名称。

还有一件事，对于路由 /settings/ 路径，我使用 url 而不是 componentUrl 属性来传递 url页面的。

这可能不是最好的解决方案，但我仍在学习。目前的问题似乎已经解决了。

谢谢