¿Cómo vincular un ancho / alto div para formar campos?
Quiero crear una cantidad dediv
s que puedo mover y cambiar de tamaño, y unir suswidth
, 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 vincularía la entrada y el texto extendido a las propiedades del objeto de 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 obtendría elobjects[1].width
para unirse a la div d1's<input>
valor?