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

Question

我想创建一些divs，我可以移动和调整它们的大小，并将它们的width、height 等绑定到数组中的一个对象。所以，如果我创建六个 div，我的数组中有六个对象，每个对象都有 .width、.height 等。

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

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].width 绑定到 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>');

因此，这在您的主 div 上使用了 style 绑定。此外，由于您在 objects[counter] 上调用 applyBindings，因此您可以直接在绑定中引用属性（而不是通过 objects[counter]）。

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

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

希望这会有所帮助。