当我第二次导航到详细信息页面时,页面变得裸露,所有样式从页面上消失,我可以找出原因,例如http://jsfiddle.net/Hpyca/24/
HTML
<div data-role="page" id="dashBoardPage" data-bind="with: dashboardData">
<button type="button" data-bind="click: goToList">DashBoard!</button>
</div>
<div data-role="page" id="firstPage" data-bind="with: hospitalList">
<div>
<div id="listViewDiv">
<ul data-role="listview" data-bind="foreach: hospitals">
<li data-bind="click: $parent.selectHospital">
<h2>Hospital Id:<span data-bind="text:id"></span></h2>
<p>Name <span data-bind="text:name"></span></p>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="detailsView" data-bind="with: hospitalList.selectedHospital">
<a href="#firstPage">Back</a>
<a href="#dashBoardPage">Home</a>
<div>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">Info</a></li>
<li><a href="#two" data-ajax="false">Details</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h2>Hospital Id : <span data-bind="text:id"></span></h2>
</div>
<div id="two">
<h2>Id : <span data-bind="text:id"></span></h2>
<input data-mini="true" tabindex="5" data-bind="value: name"
id="name"/>
</div>
</div>
</div>
</div>
js
function NavigationService(){
var self = this;
self.navigateTo = function(pageId){
$.mobile.changePage($('#' + pageId));
};
}
//You need to determine if you want to handle dependencies using requirejs or just global variables.
var navigationService = new NavigationService();
function HospitalViewModel(data){
var self = this;
self.id = data.id;
self.name = ko.observable(data.name);
}
function DashboardViewModel(data){
var self = this;
self.goToList = function(){
navigationService.navigateTo('firstPage');
};
}
function HospitalListViewModel(data){
var self = this;
self.hospitals = data;
self.selectedHospital = ko.observable();
self.selectHospital = function(hospital){
self.selectedHospital(hospital);
navigationService.navigateTo('detailsView');
};
}
function PageViewModel(){
var self = this;
//This list should be retrieved from a service of some kind
var allHospitals = [
{"id":"001","name":"Hospital1","location":"SL"},
{"id":"002","name":"Hospital2","location":"SL"}
].map(function(hospital){return new HospitalViewModel(hospital);});
self.hospitalList = new HospitalListViewModel(allHospitals);
self.dashboardData = new DashboardViewModel();
}
ko.applyBindings(new PageViewModel());
要重现问题, 单击(DashBoard) --> 单击(ListElement) --> 单击(Back,Home) --> 单击(再次列表元素 --> 转到详细信息页面),现在您可以看到裸露的 UI,
最佳答案
问题来自 KnockoutJS 的“with:”语句。
我的猜测是,当 ko.observable 为空时,“with:”将一个奇怪的属性“visible”或“display”变为 false,然后 Jquery(移动)试图使用该属性来应用样式,但失败了使用选择器找到 DOM 项。疯狂的是我没有找到任何记录该问题的来源?
我之前用一些 Jquery 插件尝试过类似的问题(datepicker,masked inputs...),我找到的解决方案是在绑定(bind) observable 后重新应用 Jquery 插件。
不幸的是,这个“hack”对你的情况没有用,因为 Jquery Mobile 不是通过 JavaScript 手动应用的。我寻找某种“刷新”Jquery Mobile 的方法,但没有结果。
所以我想出了一个解决方案,通过删除“with:”语句、调用完整的属性名称并在可观察对象中绑定(bind)一个空的“hospital”来防止空引用异常。
<span data-bind="text:hospitalList.selectedHospital().id"></span>
self.selectedHospital = ko.observable({id:"",name:"",location:""});
这个解决方案远非理想,而且无法真正扩展。但是,另一种方法是检查两个库的代码以确定“冲突”。
希望对您有所帮助!
关于jquery mobile风格不适用于详情页的二次导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23283238/