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对象，该对象具有term属性（observable）和clearSearch函数，它会重置此observable：

＆＃13;

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

＆＃13;

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

＆＃13;

这将适用于javascript和打字稿（因为后者包括前者）。

但是，如果您想要编译时间类型检查，自动管理＆＃34;此＆＃34;以及其他打字稿的优点，您可以编写以下代码：

    // 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和打字稿清除字段？

1 个答案: