¿Cómo vincular un ancho/alto div para formar campos?

Question

Quiero crear un número de div s que puedo mover y cambiar de tamaño, y enlazar sus width, height, etc. a un objeto en una matriz. Entonces, si creo seis divs, tengo seis objetos en mi matriz, cada objeto tiene .width, .height, etc.

No entiendo cómo uniría la entrada y el texto a las propiedades del objeto de la matriz usando knockout.js. Aquí está mi intento:

var counter = 0; 
var objects = []; 

$(document).ready(function() { 
    dostuff($("#main")); // give it a target container div 
}); 

function dostuff(target) { 
    counter++; 
    // create a div containing a span and an input that binds to knockout.js 

    target.append('<div id="d' + counter + '">width:<span id="d' + counter + 
     '" data-bind="text:objects[' + counter + '].width"></span>' + 
     '<input type="text" id="d' + counter + 
     '" data-bind="value:objects[' + counter + '].width"/></div>'); 

    var a = $("#d" + counter); 
    a.css("position", "absolute"); 
    a.css("width", "100px"); 
    a.css("height", "100px"); 
    a.css("background-color", "#" + 
     Math.ceil(Math.random()*9) + "0" + 
     Math.ceil(Math.random()*9) + "0" + 
     Math.ceil(Math.random()*9) + "0"); 
    a.resizable({ 
     stop: function (e, ui) { 
      this.childNodes[2].value = ui.size.width; 
     } 
    }); 
    objects[counter] = { width: "100px", height: "100px", 
     top: "0px", left: "0px" }; 
    ko.applyBindings(objects[counter]); 
} 

¿Cómo puedo obtener el objects[1].width para unirse al valor de la div de d1 <input>?

Answer 1

La cantidad mínima de cambios que tendría que hacer para conseguir que esto suceda sería hacer algo como:

target.append('<div id="d' + counter + '" data-bind="style: { width: width , height: height, top: top, left: left } }">width:<span id="d' + counter + 
     '" data-bind="text: width"></span>' + 
     '<input type="text" id="d' + counter + 
     '" data-bind="value: width"/></div>'); 

Por lo tanto, este utiliza la style vinculante en su div principal. Además, como llama a applyBindings en objetos [contador], puede hacer referencia a las propiedades directamente en los enlaces (en lugar de a través de objetos [contador]).

Si llama a esta función varias veces, querrá tener cuidado con la forma de llamar al ko.applyBindings. Si no pasa un segundo parámetro, entonces se aplicará a todo el documento. Realmente solo quieres hacer eso una vez. En su caso, es probable que desee pasar un segundo parámetro para indicar el elemento raíz exacto para comenzar. Entonces, llamarías a algo como ko.applyBindings(objects[counter], $("#d" + counter)[0]);

No conozco tu caso de uso exacto, pero si fuera yo, primero crearía mi matriz de objetos y luego usaría una plantilla para construir los divs. Luego, en el marcado tendría un contenedor que llama al enlace template con la opción foreach pasando el arreglo. Luego, crearía una plantilla que contiene el marcado para cada div. De esta manera, puede evitar crear el marcado como cadenas. Si quieres un ejemplo de hacer algo así, házmelo saber.

Espero que esto ayude.