Javascript 如何将div宽度/高度绑定到表单字段？

我想创建一些可以移动和调整大小的

div

，并将其

宽度

、

高度

等绑定到数组中的对象。因此，如果我创建六个div，数组中就有六个对象，每个对象都有

.width

，

.height

，等等

我不太明白如何使用knockout.js将输入和span文本绑定到数组对象属性。以下是我的尝试：

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

var计数器=0；
var对象=[]；
$（文档）.ready（函数（）{
dostuff（$（“#main”）；//给它一个目标容器div
});
函数dostuff（目标）{
计数器++；
//创建一个div，其中包含一个span和一个绑定到knockout.js的输入
target.append（'宽度：'+
'');
变量a=$（“#d”+计数器）；
a、 css（“位置”、“绝对”）；
a、 css（“宽度”，“100px”）；
a、 css（“高度”，“100px”）；
a、 css（“背景色”、“#”+
Math.ceil（Math.random（）*9）+“0”+
Math.ceil（Math.random（）*9）+“0”+
Math.ceil（Math.random（）*9）+“0”）；
a、 可调整大小({
停止：功能（e、ui）{
this.childNodes[2].value=ui.size.width；
}
});
对象[计数器]={宽度：“100px”，高度：“100px”，
顶部：“0px”，左侧：“0px”}；
ko.应用绑定（对象[计数器]）；
}

---

如何将

对象[1].width

绑定到div d1的

值？

要实现这一点，您需要做的最小更改如下：

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

target.append（'width:'+
'');

因此，这在主div上使用了

样式

绑定。此外，由于在对象[counter]上调用applyBindings，因此可以直接在绑定中引用属性（而不是通过对象[counter]）

如果要多次调用此函数，则需要注意如何调用

ko.applyBindings

。如果不传递第二个参数，则它将应用于整个文档。你真的只想做一次。在本例中，您可能希望传递第二个参数，以指示要开始的确切根元素。因此，您可以调用类似于

ko.applyBindings（objects[counter]，$（“#d”+counter）[0]）的东西

我不知道您的确切用例，但如果是我，我会先创建对象数组，然后使用模板构建div。然后，在标记中，我将有一个容器，它调用
模板
绑定，并使用
foreach
选项传递数组。然后，您将创建一个包含每个div的标记的模板。这样可以避免将标记构建为字符串。如果你想要一个这样做的例子，让我知道

希望这能有所帮助。
下面是一个绑定方法的快速示例，其中通过
样式
绑定div以设置对象的值，并使用
事件
绑定通过拖动或调整大小跟踪更新。你的回答太离谱了。我真的很感激。关于JSFIDLE的极好的例子。让我解决另一个问题。