Knockout, JQMobile, y la generación de un conjunto colapsable no parece funcionar bien

Question

He comprobado una serie de muestras, pero ninguna es exactamente igual a lo que estoy tratando de hacer.

Lo que tengo funciona, en su mayoría, pero no funciona del todo bien.

Aquí hay un violín para ilustrar el problema.

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

en cuenta que el juego superior funciona bien, pero está definido estáticamente.

El conjunto de abajo (Tom, steve, bob) "funciona" básicamente, pero el elemento de encabezado termina tanto en el encabezado colapsable Y en la parte del colapsable que se oculta.

Parece que debo estar haciendo algo mal, pero no he podido averiguar qué.

¿Alguna idea?

Answer 1

realidad he encontrado una manera mucho más fácil de hacer esto:

1. Configure su foreach unión como lo haría normalmente para mí parecía que esta

   <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. Envuelva eso en un div con class = "collapsi ble al igual que

   <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. Aplicar el widget colapsable a través de jQuery móvil después de hacer su unión, así:

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

4. Para un conjunto plegable de la misma idea puede se aplica solo establece la clase = "collapsible-set" en tu div de foreach. Espero que esto ayude

Answer 2

Para referencia y para cualquier otra persona que se encuentre con este problema, resulta ser al menos algo obvio en retrospectiva.

La plantilla de Knockout construida en "anónima" funciona muy bien en muchos casos, pero con JQMobile, puede ser un poco peculiar.

Esto se debe a que JQMobile ajustará el contenido de la plantilla anónima cuando se carga la página, al igual que con el resto del contenido.

Luego, más adelante, cuando uses la función ApplyBindings de knockout, la eliminación directa agregará los elementos aplicables, justo como debería. Como han insinuado muchas publicaciones y respuestas, DEBES llamar collapsible() a los elementos recién creados, a través de algo como esto.

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

No hay problema. SIN EMBARGO, si JQM ya ha aplicado el formato, entonces la plantilla anónima ya ha sido "renderizada" por JQM, por lo que la vuelve a llamar llamando a collapsible causando todo tipo de resultados funky, incluyendo doble encabezado, collapsibles anidados, etc.

The solución para mí era utilizar la función de "plantilla denominada" Knockout, y sólo hay que poner la plantilla para hacer que los elementos plegables en una etiqueta, como esto:

<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>    

hacer esto impide JQM de la "representación" de los elementos de plantilla cuando el cargas de página, por lo que se mostrarán correctamente cuando se generen realmente.

EDITAR: Lo anterior funciona bien para collapsibles NO en un conjunto plegable, pero, si están en un conjunto, he encontrado el estilo de los elementos (en particular, el redondeo de la esquina para indicar que pertenece a un conjunto) no funciona bien.

De lo que puedo decir, hay 2 problemas:

La primera es que acaba de desencadenar "Crear" en realidad no actualizar el estilo de todos los botes hinchables en el conjunto. para hacer eso tienes que hacer ...

$("div[data-role='collapsible-set']").collapsibleset('refresh'); 

Pero, hay un problema peor. JQM "marca" el último elemento del conjunto como el "último elemento". Ese hecho luego se usa para determinar cómo diseñar el último artículo a medida que se expande/contrae.

Dado que Knockout en realidad no reconstruye todo el conjunto (de velocidad), cada vez que llama al método de actualización, JQM marca el último elemento como "último", pero nunca elimina las marcas de elementos anteriores. Como resultado, si comienza desde una lista vacía, CADA elemento termina siendo marcado como "último" y el estilo falla debido a esto.

He detallado la solución para eso en github en un informe de problemas.

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