如何綁定div寬度/高度以形成字段？

Question

我想創建一個可以移動和調整大小的div，並將它們的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>'); 

所以，這裏使用了style在您的主要DIV結合。此外，由於您正在對對象[counter]調用applyBindings，因此可以直接在綁定中引用屬性（而不是通過對象[counter]）。

如果您多次調用此函數，那麼您將需要小心如何調用ko.applyBindings。如果您沒有傳遞第二個參數，那麼它將應用於整個文檔。你真的只想這樣做一次。在你的情況下，你可能想要傳遞第二個參數來指示開始的確切根元素。所以，你會打電話給我一些像ko.applyBindings(objects[counter], $("#d" + counter)[0]);

我不知道你的確切用例，但如果是我，我會先創建我的數組對象，然後使用模板來構建div。然後，在標記中，我將有一個容器，它調用template綁定，並通過foreach選項傳遞數組。然後，您將創建一個包含每個div的標記的模板。這樣可以避免將標記構建爲字符串。如果你想要一個這樣的例子，讓我知道。

希望這會有所幫助。