Como vincular uma largura / altura div para formar campos?

Quero criar um número dedivs 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

questionAnswers(1)

yourAnswerToTheQuestion