如何使用 KnockoutJs 和打字稿清除字段？

Question

我知道这些东西在jQuery很容易，但是我不知道KO和TS怎么办。这是我的代码：

Html

    <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 更容易，因为视图的属性可以绑定到可观察对象。

这意味着每次在幕后（在 viewModel 对象中）发生变化时，视图都会相应地自动更新。

在你的特定情况下，你需要创建一个 viewModel 对象，它有一个术语属性 (observable)，以及一个 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 和打字稿（因为后者包括前者）。

然而，如果你想要编译时类型检查，"this"的自动管理，以及其他 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());

如何使用 KnockoutJs 和打字稿清除字段？

How do I clear fields using KnockoutJs and typescript?

typescript

knockout.js

reset