2017-01-03 3 views
0

이 것들은 jQuery에서 매우 쉽다는 것을 알고 있지만 KO와 TS로하는 방법을 모른다. 뷰의 속성을 관찰 가능한 결합 할 수 있기 때문에 KnockoutJs와 typescript를 사용하여 필드를 지우려면 어떻게해야합니까?

<div class="form_container"> 
     <div class="label-n-input_container"> 
      <div class="input_container"> 
       <input type="text" data-bind="textInput: $root.term" /> 
      </div> 
     </div> 

     <div class="clear-button_container"> 
      <button class="" data-bind="click: $root.clearSearch">Clear search</label> 
      </button> 
     </div> 
    </div> 

답변

3

것들, 실제로 JQuery와보다 녹아웃의 방법으로 쉽게

HTML : 여기에 내 코드입니다.

즉, 무언가 (viewModel 객체의) 장면 뒤에서 무언가가 변경 될 때마다 뷰가 그에 따라 자동으로 업데이트 될 수 있음을 의미합니다.

var vm = function() { 
 
    var self = this; 
 
    self.term = ko.observable("default"); 
 
    self.clearSearch = function() { 
 
    self.term(""); 
 
    }; 
 
}; 
 

 
ko.applyBindings(new vm());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div class="form_container"> 
 
     <div class="label-n-input_container"> 
 
      <div class="input_container"> 
 
       <input type="text" data-bind="textInput: $root.term" /> 
 
      </div> 
 
     </div> 
 

 
     <div class="clear-button_container"> 
 
      <button class="" data-bind="click: $root.clearSearch">Clear search</label> 
 
      </button> 
 
     </div> 
 
    </div>

이 의지 : 특정 경우

는이 관찰을 재설정 용어 속성 ( observable)를 가진 뷰 모델 객체 및 clearSearch 함수를 작성해야 자바 스크립트와 타이프 스크립트 모두에서 작동합니다 (후자에는 전자가 포함되기 때문에).

// import actual knockout declarations from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/knockout/index.d.ts 
interface KnockoutObservable<T> { 
    (): T; 
    (value: T | null): void; 
} 

interface Knockout { 
    applyBindings(vm: any): void; 
    observable<T>(value: T): KnockoutObservable<T>; 
} 

declare var ko: Knockout; 

class vm { 
    public term: KnockoutObservable<string>; 
    constructor() { 
     this.term = ko.observable("default"); 
    } 

    public clearSearch() { 
     this.term(""); 
    } 
} 

ko.applyBindings(new vm()); 
: 당신은 시간 유형 검사, "이"자동 관리 및 기타 타이프 라이터의 선하심을 컴파일하려면

그러나, 당신은 다음 코드 조각을 쓸 수 있습니다