Como vincular uma largura / altura div para formar campos?
Quero criar um número dediv
s que eu posso mover e redimensionar e vincular seuswidth
, height
, etc. para um objeto em uma matriz. Portanto, se eu criar seis divs, tenho seis objetos em minha matriz, cada objeto tendo.width
, .height
et
Eu não entendo bem como vincularia a entrada e o texto às propriedades do objeto da matriz usando knockout.js. Aqui está a minha tentativa:
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]);
}
Como eu obteria oobjects[1].width
para vincular à div d1's<input>
valor