正在使用 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>
我只想在单击相应的选项卡按钮时编译该模板。也许这就是问题所在。
有什么建议么？
一遍又一遍地浏览文档后，我有了另一种方法来做到这一点。
因此，在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。
这可能不是最好的解决方案，但我仍在学习。它似乎已经被当前的问题解决了。
谢谢
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句