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调用。因为我在那里设置了一些标头用于身份验证和填充（用于所有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属性来传递页面的网址。

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

谢谢

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

1 个答案: