KnockoutJsとtypescriptを使用してフィールドをクリアするにはどうすればよいですか？

Question

私はこれらのことがjQueryで非常に簡単だと知っていますが、KOとTSのやり方はわかりません。ビューのプロパティが観測にバインドすることができますので、

<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> 

Answer 1

物事は、実際にはjQueryを使ってよりノックアウト方法簡単です

HTML：ここに私のコードです。

つまり、何かが（viewModelオブジェクトの）シーンの背後で変更されると、そのビューは自動的に更新されます。あなたは、この観測可能をリセット用語プロパティ（observable）を持っているのViewModelオブジェクト、およびclearSearch機能を作成する必要があり、あなたの特定のケースで

：

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>

この意志javascriptとtypescriptの両方で動作します（後者には前者が含まれているため）。

時の型チェックし、「この」の自動管理をコンパイルし、他のtypescriptですの良さしかし、あなたがしたい場合、あなたは以下のコードを記述することができます。

// 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());