Question

当我第二次导航到详情页面时，页面变得赤裸裸，所有样式都从页面消失，我可以找出原因，例如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） - ＆gt;点击（ListElement） - ＆gt;点击（返回，首页） - ＆gt;点击（再次列出元素 - ＆gt;转到详细信息页面），现在您可以看到裸UI，

Answer 1

问题来自KnockoutJS“with：”声明。

我的猜测是当“ko.observable”为空时，“with：”将一个奇怪的属性“visible”或“display”变为false，然后Jquery（mobile）尝试使用该属性来应用样式，使用其选择器查找DOM项。很遗憾的是，我没有找到任何来源记录这个问题？

我在使用一些Jquery插件之前尝试过类似的问题（datepicker，masked inputs ...），我找到的解决方案是在绑定observable后重新应用Jquery插件。

不幸的是，这种“黑客”在你的情况下没有用，因为Jquery Mobile不是通过JavaScript手动应用的。我找了一些方法“刷新”Jquery Mobile，但没有结果。

所以我通过删除“with：”语句，调用完整的属性名称并在observable中绑定一个空的“hospital”以防止空引用异常来提出解决方案。

JsFiddle

<span data-bind="text:hospitalList.selectedHospital().id"></span>

self.selectedHospital = ko.observable({id:"",name:"",location:""});

这个解决方案远非理想，而且不具备可扩展性。但是，另一种方法是检查两个库的代码以识别“冲突”。

希望它有所帮助！

Answer 2

为您找到了答案，而且我已updated your original fiddle - 它现在按预期工作了。唯一的变化是您的NavigationService，如下所示：

function NavigationService() {
    var self = this;

    self.navigateTo = function (pageId) {
        $.mobile.changePage($('#' + pageId));
        $('#detailsView').trigger('create'); // add this line
    };
}

此处还有一些其他问题可以解决这个问题：

Jquery移动样式不适用于第二次导航到详细信息页面

2 个答案: