How to link width / height div to form fields?

Question

I want to create a number divthat I can move and resize, and snap them width, heightetc. to the object in the array. So, if I create six divs, I have six objects in my array, each object has .width, .heightetc.

I do not quite understand how to bind input and range text to the properties of an array object using knockout.js. Here is my attempt:

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]);
}

How do I bind objects[1].widthto the value of div d1 <input>?

Answer 1

, , , - :

 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>');

, style div. , applyBindings [counter], ( [counter]).

, , ko.applyBindings. , . . , , , . , ko.applyBindings(objects[counter], $("#d" + counter)[0]);

, , , div. , template foreach, . , div. , . , , - .

, .