KnockoutJS solo muestra mi plantilla si tengo un li extra

Así que tengo una plantilla que estoy usando para hacer algo de recursividad en algunos objetos que pueden tener elementos secundarios. Tengo la instrucción if funcionando como quiero (creo). Sin embargo, mis elementos secundarios solo aparecen si tengo un li adicional antes de la instrucción if.

Aquí está mi plantilla

<script type="text/html" id="journalTemplate">
<li data-bind="text: Description">
    <div>
    <li data-bind = "visible: IsGroup"></li>
    <!-- ko if: IsGroup -->
    <ol data-bind="template: {name: 'journalTemplate', foreach: ChildEntities}">
    </ol>
    <!-- /ko -->
    </div>
</li>

Estoy usando el mapeo de matrices, por lo que no hay un modelo de vista real para mostrar, pero el objeto de C# es bastante simple: tiene una Descripción, un IsGroup bool y una lista de ChildEntities (que es nulo si IsGroup es falso, como un lado Nota). Si no tengo el li vacío, los bloques de comentarios de la instrucción if ni siquiera aparecen.

¿Alguna idea?

preguntado el 22 de mayo de 12 a las 16:05

No estoy muy siguiendo. ¿La plantilla anterior funciona? o necesita otro elemento LI antes de la declaración KO if para que funcione? Actualmente, su marcado anterior no es válido. No puede tener un elemento LI dentro de un div. -

¿Puedes agregar un jsfiddle de tu problema? -

@madcapnmckay: Ahora mismo funciona, pero tiene eso cuando en realidad no quiero ese li allí. Solo quiero el li con el texto y el sub ol. (Eliminé el div, solo lo agregué con la esperanza de que solucionara mis problemas, pero no fue así). No estoy seguro de cómo colocar un jsfiddle, porque estoy completando mis objetos js a partir de datos reales en mi base de datos. Sin embargo, comenzaré a trabajar en burlarme de algunas cosas. -

aquí está un violín js. Se ve correcto en el violín porque no muestra el li vacío. Sin embargo, no quiero que el li vacío esté allí. Sin embargo, sin el li vacío, no ejecuta correctamente la plantilla en los elementos secundarios. -

1 Respuestas

Está bien, veo el problema. El problema es su enlace de texto en su LI.

El texto en html está representado por elementos dom de textNode que, aunque no se pueden escribir explícitamente en el marcado html, se comportan de la misma manera. Efectivamente, su enlace de texto está reemplazando el HTML interno de su LI con cualquier texto que tenga.

Lo que no me queda claro es por qué su elemento LI adicional no válido detiene el reemplazo total de innerHtml...

De todos modos, la solución correcta es estructurar su plantilla de esta manera.

<script type="text/html" id="journalTemplate">
    <li>
        <span data-bind="text: Description"></span>
        <!-- ko if: IsGroup -->
        <ol data-bind="template: {name: 'journalTemplate', 
                  foreach: ChildEntities}">
        </ol>
        <!-- /ko -->
    </li>
</script>

http://jsfiddle.net/madcapnmckay/F2vSW/1/

Espero que esto ayude.

contestado el 22 de mayo de 12 a las 19:05

Me di cuenta de eso justo antes de que publicaras. Sin embargo, no sé por qué la cosa extra li lo arregló. ¡Gracias de todos modos! - Colin De Clue

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.