mobile stile Jquery non si applica in seconda navigazione tempo per la pagina dei dettagli

Question

Quando sono passare alla pagina dei dettagli per la seconda volta, la pagina diventa nudo, tutti gli stili sparire dalla pagina, ho potuto capire il motivo, ad esempio 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()); 

Per riprodurre il problema, Click (Dashboard) -> Fare clic su (LISTELEMENT) -> Fare clic su (Indietro, Inizio) -> Fare clic su (di nuovo elenco elemento -> vai alla pagina dei dettagli), ora è possibile vedere l'interfaccia utente nuda,

Answer 1

Trovato la risposta per te e io ho updated your original fiddle - ora funziona come previsto. L'unica modifica apportata è stata al vostro NavigationService come segue:

function NavigationService() { 
    var self = this; 

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

Ci sono alcune altre domande qui sul SO quell'indirizzo questo:

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

Answer 2

Il problema sta venendo dall'istruzione KnockoutJS "with:".

La mia ipotesi è che il "con:" trasforma una proprietà strano "visibile" o "schermo" per false quando la ko.observable è vuota, e poi Jquery (mobile) cercando di utilizzare la proprietà per applicare lo stile, fallisce per trovare l'elemento DOM con il suo selettore. La cosa pazzesca è che non ho trovato alcuna fonte che documentasse il problema?

Ho sperimentato un problema simile con alcuni plugin Jquery prima (datepicker, input mascherati ...), la soluzione che ho trovato è stata riapplicare il plugin Jquery dopo aver collegato l'osservabile.

Sfortunatamente, questo "trucco" non è utile nel tuo caso poiché Jquery Mobile non viene applicato manualmente tramite JavaScript. Ho cercato un modo "per aggiornare" Jquery Mobile ma nessun risultato.

Quindi mi è venuta in mente una soluzione rimuovendo "with:", chiamando il nome completo della proprietà e legando un "ospedale" vuoto nell'osservabile per evitare un'eccezione di riferimento null.

JsFiddle

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

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

Questa soluzione è tutt'altro che ideale, e non realmente scalabile. Ma, l'altro modo sarebbe ispezionare il codice di entrambe le librerie per identificare il "conflitto".

Spero che aiuti!