如何绑定div宽度/高度以形成字段？

Question

我想创造一些divs表示我可以移动和调整,并结合他们的width,height在一个阵列等的对象.所以,如果我创建6个的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]);
}

如何将objects[1].widthdiv绑定到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 上的绑定。此外，由于您在对象 [counter] 上调用 applyBindings，因此您可以直接在绑定中引用属性（而不是通过对象 [counter]）。

如果您多次调用此函数，那么您需要小心调用方式ko.applyBindings。如果您不传递第二个参数，那么它将应用于整个文档。你真的只想这样做一次。在您的情况下，您可能需要传递第二个参数来指示要开始的确切根元素。所以，你会调用类似的东西ko.applyBindings(objects[counter], $("#d" + counter)[0]);

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

希望这可以帮助。