在模板页面中显示 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',
  }
];

此联系人 页面包含静态内容。对于 Home 页面，我在 deviceready 状态期间执行 AJAX API 调用。因为我正在设置一些 headers 用于身份验证和内容（对于所有 AJAX api 调用）。

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

我正在那个模板页面中使用它：

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

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

有什么建议吗？

Answer 1

在反复查阅文档后，我找到了另一种方法。

因此，在 tabShow 事件期间，我检查用户是否正在访问 Settings/Profile 选项卡。如果是这样，我检查 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页面。

这可能不是最好的解决方案，但我仍在学习。而且现在的问题好像已经解决了。

谢谢

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

Displaying ajax data in template page - Framework7

javascript

ajax

phonegap

html-framework-7