Kiểu di động Jquery không áp dụng trong điều hướng thứ hai đến trang chi tiết

Question

Khi tôi điều hướng đến trang chi tiết đến lần thứ hai, trang trở nên trần truồng, tất cả các kiểu biến mất khỏi trang, tôi có thể tìm ra lý do, ví dụ 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()); 

Để tạo lại lỗi, Click (bảng điều khiển) -> Click (ListElement) -> Nhấp vào (Quay lại, Trang chủ) -> Nhấp vào (một lần nữa phần tử danh sách -> đi tới trang chi tiết), bây giờ bạn có thể thấy giao diện người dùng khỏa thân,

Answer 1

Tìm câu trả lời cho bạn và tôi đã updated your original fiddle - hiện tại nó đang hoạt động như dự định. Sự thay đổi chỉ thực hiện là NavigationService của bạn như sau:

function NavigationService() { 
    var self = this; 

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

Có một vài câu hỏi khác ở đây trên SO địa chỉ rằng đây:

• Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content
• jQuery Mobile does not apply styles after dynamically adding content

Answer 2

Sự cố đến từ câu lệnh KnockoutJS "with:".

Tôi đoán là "with:" biến một thuộc tính lạ "hiển thị" hoặc "hiển thị" thành false khi ko.observable trống, và sau đó Jquery (di động) cố gắng sử dụng thuộc tính để áp dụng kiểu, không thành công để tìm mục DOM có bộ chọn của nó. Điều điên rồ là tôi không tìm thấy bất kỳ nguồn tài liệu nào về vấn đề này?

Tôi đã thử nghiệm sự cố tương tự với một số plugin Jquery trước đây (trình ghi ngày tháng, đầu vào bị che dấu ...), giải pháp tôi tìm thấy đã áp dụng lại plugin Jquery sau khi ràng buộc quan sát được.

Thật không may, "hack" này không hữu ích trong trường hợp của bạn vì Jquery Mobile không được áp dụng thủ công qua JavaScript. Tôi tìm kiếm một số cách "làm mới" Jquery Mobile nhưng không có kết quả. Vì vậy, tôi đã đưa ra một giải pháp bằng cách loại bỏ "với:" tuyên bố, gọi tên đầy đủ tài sản và ràng buộc một "bệnh viện" trống trong quan sát để ngăn chặn ngoại lệ tham chiếu null.

JsFiddle

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

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

Giải pháp này là xa lý tưởng, và không thực sự mở rộng. Nhưng, cách khác sẽ kiểm tra mã của cả hai thư viện để xác định "xung đột".

Hy vọng điều đó sẽ hữu ích!