녹아웃을 사용하여 새 요소를 바인딩하는 방법은 무엇입니까?

Question

페이지가로드 된 후 어떻게 새 요소를 바인딩 할 수 있습니까? 나는이

this.makeUI = function(container) 
{ 
    div = document.createElement("div"); 
    div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    ko.applyBindings(new system,div); 
}  

을 시도하지만 theseposts에 따라 작동하지 않을 경우

나는이

system = function() 
{ 

    this.hello = function() 
    { 
     alert("hello"); 
    } 

    this.makeUI = function(container) 
    { 
     div = document.createElement("div"); 
     div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    } 
} 

ko.applyBindings(new system); 

같은 것을 가지고있다.

Answer 1

노크 아웃의 목표는 dom 요소 집합에서 한 번만 녹아웃을 호출하는 것입니다. 따라서 전체 문서에서 applyBindings를 반복적으로 호출하면 여러 바인딩에 문제가 발생합니다.

applyBindings를 여러 번 호출하는 것이 정당한 경우가 있는데, 이는 첫 번째 바인딩시 dom에 없으므로 바인딩되지 않은 부분 뷰의 경우에 해당합니다. applyBinding을 해당 dom 요소로 선택적으로 범위를 지정하여 이러한 요소를 바인딩 할 수 있습니다.

다음은 달성하고자 시도한 내용의 예입니다. 문제는 당신이 만든 노드를 삽입하지 않았다는 것입니다.

http://jsfiddle.net/madcapnmckay/qSqJv/

나는이 특정 예를 들어이 방법을 권하고 싶지 않다가, 더 나은 방법이있다.

dom 요소를 동적으로 만들고 녹아웃으로 바인딩하려는 경우 가장 일반적인 방법은 요소를 삽입하고 찾은 데이터 바인딩 특성을 바인딩하는 내장 된 템플릿 기능을 사용하는 것입니다. 당신이 버튼의 숫자를 만들려면

그래서 당신은 여기에 바이올린의

this.makeUI = function(container) 
{ 
    self.buttons.push({ 
     text: "button " + self.buttons().length, 
     handler: this.hello 
    }); 
} 

할 수 있습니다. 이 도움이

http://jsfiddle.net/madcapnmckay/ACjvs/

희망.