Combinación de texto y HTML por nocaut

Question

Así es como yo quiero construir mi html

<a href="#">John <i class="person"></i></a> 

Y con knockout.js esto es lo que he hecho.

<a data-bind="text:name"><i class="person"></i></a> 

Como se puede adivinar elementos enteros (no sólo texto) de anclaje se quita los pisos más altos de la unión en este caso, las etiquetas de todo el interior del anclaje se elimina texto. Mi solución está abajo.

<a data-bind="html: name() + '<i class="person"></i>'"></a> 

cadena concat con html en data-bind es una solución pero tiene 2 grandes inconvenientes. la propiedad de "nombre" no es segura, así que podemos obtener una inyección html. Sedondly escribir html dentro de los atributos de enlace de datos es una mierda.

Otra solución es.

<a href="#"><span data-bind="text:name"></span><i class="person"></i></a> 

Sé que la introducción de nuevas marcas HTML para la solución justa. Es lo que he encontrado mejor.

¿Cuál es la solución conocida para este problema en knockout.js?

¿Podemos especificar simplemente actualizar el texto no elementos enteros dentro de la vinculación de texto a través de parámetros?

¿O mejor solución?

Answer 1

Usar el tramo es la solución preferida. Si el enlace de texto no reemplaza todo el contenido, entonces es difícil saber qué actualizar y no actualizar la próxima vez que cambie. Si desea tratar siempre con el primer nodo secundario del elemento, puede escribir un pequeño enlace personalizado para ayudar.

Aquí hay una unión simple prependText. Esto siempre reemplazará el primer nodo secundario del elemento que contiene el enlace. Por lo tanto, debería asegurarse de que el primer nodo sea al menos un espacio.

ko.bindingHandlers.prependText = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     //replace the first child 
     element.replaceChild(document.createTextNode(value), element.firstChild); 
    }   
}; 

usarlo como:

<a href="#" data-bind="prependText: name"> <span> another element</span></a> 

muestra: http://jsfiddle.net/rniemeyer/5CfzH/

Answer 2

También puede utilizar KO notación "sin contenedor"

<!-- ko text: YourProperty --> 
<!-- /ko--> 

El mismo se puede hacer con otras fijaciones (como foreach): See Part 4