Knockout.js - 동적 적용 템플릿

Question

예/아니요 드롭 다운이 포함 된 양식이 있습니다. "예"를 선택하면 템플릿을 사용하여 html의 새로운 형제 컨테이너를 n 개 생성합니다. html을 혼란스럽게 만들고 싶지는 않습니다. 빈 양식을 사용하면 "예"를 선택하지 않을 것입니다.

어떻게하는지 궁금합니다.

아마도 contains 속성을 observableArray()로 만들 수 있습니다. 그런 다음, 선택 상자의 값을 검사하는 함수를 실행하는 선택 상자에서 사용자 정의 바인딩을 만들고, "예"일 경우 내용 배열과 $ .each() observableArray.push()를 가져옵니다.

이 작업을 수행하는 비 사용자 지정 바인딩 방법이 있습니까?

감사합니다.

Answer 1

확실히, 당신은 수동으로 당신의 녹아웃 관찰 할 수있는 기능을 구독 하여이 작업을 수행 할 수 있습니다.

var myModel = function(){ 
    var self = this; 
    self.buildItems = ko.observable(false);//for the yes/no 
    self.items = ko.observableArray(); 

    //ask knockout to run this function when the buildItems observable value changes 
    self.subscription = this.buildItems.subscribe(function(newValue){ 
     if(newValue == 'true'){ 
      //modify the items observableArray so that the UI is updated 
      var newItems = [{name:'item1'},{name:'item2'}]; 
      self.items(newItems); 
     } 
    }); 
}; 

var model = new myModel(); 

를 다음 템플릿은 다음과 같이 보일 수 있습니다 : 당신의보기 모델은 다음과 같을 수 http://jsfiddle.net/vmebt/

: 여기

<div id="bindContainer"> 
    <select data-bind="value: buildItems"> 
     <option value="false">No</option> 
     <option value="true">Yes</option> 
    </select> 
    <ul data-bind="foreach: items"> 
     <li data-bind="text: name"></li> 
    </ul> 
</div> 

이 방법의 바이올린의를