div 필드 너비/높이 바인딩하는 방법?

Question

배열의 객체에 width, height 등을 바인딩하고 바인딩 할 수있는 숫자 div을 만들고 싶습니다. 그래서 6 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이 사업부의 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을 사용합니다. 또한 객체 [counter]에 대해 applyBindings를 호출하므로 객체 (counter) 대신 바인딩에서 직접 속성을 참조 할 수 있습니다.

이 함수를 여러 번 호출하는 경우 ko.applyBindings을 호출하는 방법에주의해야합니다. 두 번째 매개 변수를 전달하지 않으면 전체 문서에 적용됩니다. 당신은 정말로 한 번만하고 싶습니다. 귀하의 경우에는 정확한 루트 요소를 나타 내기 위해 두 번째 매개 변수를 전달해야 할 수 있습니다. 그래서, 당신은 비슷한 것을 호출 할 것입니다 ko.applyBindings(objects[counter], $("#d" + counter)[0]);

정확한 유스 케이스를 모르겠지만, 저라면 저의 객체 배열을 먼저 생성 한 다음 템플릿을 사용하여 div를 작성합니다. 마크 업에서는 배열을 전달하는 foreach 옵션을 사용하여 template 바인딩을 호출하는 컨테이너가 있습니다. 그런 다음 각 div에 대한 마크 업을 포함하는 템플릿을 만듭니다. 이렇게하면 마크 업을 문자열로 만들지 않아도됩니다. 그런 일을하는 예를 원한다면 알려주세요.

희망이 도움이됩니다.