Knockout, JQMobile e la generazione di un set comprimibile non sembrano funzionare correttamente

Question

Ho controllato un numero di campioni, ma nessuno è esattamente lo stesso di quello che sto cercando di fare.

Quello che ho, per lo più, funziona, ma non funziona bene.

Ecco un violino per illustrare il problema.

http://jsfiddle.net/5yA6G/4/

Si noti che il set top funziona bene, ma è statico definito.

Il set inferiore (Tom, steve, bob) "funziona" in pratica, ma l'elemento di intestazione finisce nell'intestazione collassabile E nella porzione del pieghevole che viene nascosta.

Sembra che io stia facendo qualcosa di sbagliato, ma non sono stato in grado di capire cosa.

Qualche idea?

Answer 1

in realtà ho trovato un modo molto più semplice per farlo:

1. Impostare il tuo foreach vincolante come si farebbe normalmente per me sembrava che questo

   <div data-bind="foreach: promotions"> 
   
       <h3 data-bind="text: Title"></h3> 
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p> 
        <span data-bind="text: Description"></span> 
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a> 
   

2. Avvolgere in un div con classe = "collapsi ble in questo modo

   <div data-role="collapsible-set" data-bind="foreach: promotions"> 
   
   <div class="collapsible"> 
       <h3 data-bind="text: Title"></h3> 
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p> 
        <span data-bind="text: Description"></span> 
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a> 
   

3. Applicare il widget pieghevole tramite jQuery Mobile dopo fate la vostra associazione in questo modo:

   $(document).ready(function() { 
       ko.mapping.fromJS(data, dataMappingOptions, PromotionViewModel.promotions); 
       ko.applyBindings(PromotionViewModel); 
       $('.collapsible').collapsible(); 
   }); 
   

4. Per un set pieghevole la stessa idea può da applicare basta impostare class = "collapsible-set" sul tuo foreach div. Spero che questo aiuti

Answer 2

Solo per riferimento e per chiunque altro si imbattesse in questo problema, risulta essere alquanto ovvio con il senno di poi.

Il template "anonimo" incorporato di Knockout funziona alla grande in molti casi, ma con JQMobile può essere un po 'bizzarro.

Questo perché JQMobile regolerà il contenuto del modello anonimo quando la pagina viene caricata, proprio come con tutti gli altri contenuti.

Quindi, in seguito, quando si utilizza la funzione ApplicaBordi di knockout, il knockout aggiungerà gli elementi applicabili, proprio come dovrebbe. Come molti post e risposte hanno suggerito, devi quindi chiamare collassabile() sugli elementi appena creati, tramite qualcosa di simile.

$("div[data-role='collapsible']").collapsible({refresh: true}); 

Nessun problema. TUTTAVIA, se JQM ha già applicato la formattazione, il modello anonimo è già stato "renderizzato" da JQM, quindi lo si può eseguire nuovamente invocando collassabile causando tutti i tipi di risultati funky, inclusi intestazione raddoppiata, crollati annidati, ecc.

soluzione per me è stato quello di utilizzare la funzione "nome modello" di Knockout, e appena messo il modello di rendere gli elementi pieghevoli in un tag, in questo modo:

<script type="text/html" id="alarm-template"> 
    <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="false"> 
     <h3 data-bind="text:name"></h3> 
     <p>The content here</p> 
     <p data-bind="text: name"></p> 
    </div> 
</script>    

in questo modo si impedisce jQm da "rendering" gli elementi del modello, quando il la pagina viene caricata, quindi verranno renderizzati correttamente quando vengono effettivamente generati.

MODIFICA: Quanto sopra funziona bene per collassabili NON in un insieme pieghevole, ma, se sono in un set, ho trovato lo stile degli elementi (in particolare, l'arrotondamento degli angoli per indicare l'appartenenza a un set) non funziona bene

Da quello che posso dire, ci sono 2 problemi:

Il primo è che solo innescare "Crea" in realtà non aggiornare lo stile di tutte le collapsibles nel set. per farlo devi fare ...

Ma, c'è un problema peggiore. JQM "contrassegna" l'ultimo elemento del set come "ultimo elemento". Questo fatto viene quindi utilizzato per determinare come modellare l'ultimo elemento mentre viene espanso/compresso.

Poiché Knockout non ricostruisce l'intero set (per la velocità), ogni volta che si chiama il metodo di aggiornamento, JQM contrassegna necessariamente l'ultimo elemento come "ultimo", ma non rimuove mai i segni sugli elementi precedenti. Di conseguenza, se si inizia da una lista vuota, OGNI oggetto finisce con "l'ultimo" e lo stile fallisce a causa di ciò.

Ho dettagliato la correzione per quello su github in un rapporto di errore.

https://github.com/jquery/jquery-mobile/issues/4645