¿Puedo aplicar Vinculaciones a más de un elemento DOM usando Knockout?

Question

Tengo una estructura como esta:

<div id='col1'> ... some ko elements ... </div> 
<div id='col2'></div> 
<div id='col3'> ... some more ko elements ... </div> 

... y tengo que ser capaz de ko.applyBindings a col1 y col3. En este momento, estoy haciendo algo como esto para unirse a col1:

ko.applyBindings(myViewModel, document.getElementById("col1")); 

Eso funciona bien para rellenar la primera columna. Pero todavía me falta la tercera columna. Me encantaría ser capaz de hacer esto:

<div id='col1' class='bindable'> ... some ko elements ... </div> 
<div id='col2'></div> 
<div id='col3' class='bindable'> ... some more ko elements ... </div> 

Y entonces ...

ko.applyBindings(myViewModel, $(".bindable")); 

... para que este trate de obligar a todas las instancias de .bindable. ¿Hay algo como esto en el nocaut, o tienes alguna sugerencia?

Answer 1

Aquí es la mejor solución que he encontrado:

<div id='col1' class='bindable'> ... some ko elements ... </div> 
<div id='col2'></div> 
<div id='col3' class='bindable'> ... some more ko elements ... </div> 

Y a continuación, el script que se une ...

$(".bindable").each(function(){ 
    ko.applyBindings(myViewModel, this[0]); 
} 

Esto funciona para mí y es agradable y limpio.

Answer 2

Mirando esto desde otro ángulo, solo tiene 1 modelo de vista. Entonces, ¿por qué no envolver todo el conjunto de div (col1, col2, etc.) con un div y enlazar su viewmodel a él?

<div id='myWrapper'> 
    <div id='col1'> ... some ko elements ... </div> 
    <div id='col2'></div> 
    <div id='col3'> ... some more ko elements ... </div> 
</div>