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

【问题标题】：Displaying ajax data in template page - Framework7在模板页面中显示 ajax 数据 - Framework7
【发布时间】：2018-06-07 12:47:40
【问题描述】：

正在使用 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 调用。因为我在那里设置了一些用于身份验证和东西（用于所有 AJAX api 调用）的标头。

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

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

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

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

有什么建议吗？

【问题讨论】：

我建议你阅读 [template7 docs] (idangero.us/template7)，特别是 Global contextblock

标签： javascript ajax phonegap html-framework-7

【解决方案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。

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

谢谢

【讨论】：