knockout.js - data - knockout visible

knockout foreach en el medio de una mesa

Question

Tengo una mesa como esa:

<table>
<thead>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
</thead>
<tr>
<td>static 1a</td><td>static 2a</td>
</tr>
<tr>
<td>dynamic 1b</td><td>dynamic 2b</td>
</tr>
<tr>
<td>dynamic 1c</td><td>dynamic 2c</td>
</tr>
</table>

Los campos dinámicos necesitan ser un foreach directo para iterar todas las propiedades del objeto. Lo único que puedo pensar es algo así como:

 <tbody data-bind="foreachprop: properties">
<tr><td><span data-bind="text: propertyName"></span></td><td><span data-bind="text: value"></span></td></tr>
</tbody>

Que técnicamente funciona, pero está atornillado con mi estilo porque la fila estática debería ser parte del tbody. ¿Qué más puedo vincular con el para cada uno? Debo extrañar una solución simple.

actualización : en realidad no estoy usando "foreach", estoy usando una función personalizada que recorre las propiedades. Cuando intento usar las propiedades <! - ko foreachprop:>, obtengo el siguiente error de consola:

Error no detectado: el enlace ''foreachprop'' no se puede usar con elementos virtuales

Aquí está la función foreachprop

ko.bindingHandlers.foreachprop = {
transformObject: function (obj) {
var properties = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var newObj = obj[key];
newObj.propertyName = key;
properties.push(newObj);
}
}
return properties;
},
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.utils.unwrapObservable(valueAccessor()),
properties = ko.bindingHandlers.foreachprop.transformObject(value);
ko.applyBindingsToNode(element, { foreach: properties });
return { controlsDescendantBindings: true };
}
};

Answer 1

Puede usar foreach sin un elemento contenedor (documentación: nota 4 ) Para manejar esto, puede usar la sintaxis de flujo de control sin contenedor . Solo necesita una línea de comentarios específicos donde puede poner su foreach :

<tbody data-bind="">
<tr>
<td>static 1a</td><td>static 2a</td>
</tr>
<!-- ko foreach: properties -->
<tr>
<td>
<span data-bind="text: propertyName"></span>
</td>
<td>
<span data-bind="text: value"></span>
</td>
</tr>
<!-- /ko -->
</tbody>

Si está utilizando un enlace personalizado foreachprop entonces necesita configurarlo con elementos virtuales. Puede hacerlo después de la declaración de bindingHandlers con:

ko.virtualElements.allowedBindings.foreachprop = true;

Debe tener en cuenta que puede necesitar volver a escribir su lógica de manipulación DOM dentro de su enlace personalizado para admitir los elementos virtuales. Puede encontrar una extensa documentación sobre los ayudantes de virtualElements en la documentación: Creación de enlaces personalizados que admiten elementos virtuales

Answer 2

También me di cuenta de que puedes tener múltiples elementos de tbody en una mesa. Esta solución solucionó mi problema, así que pensé en compartirlo, pero me gusta que Nemesv sea mejor.