Question

我想在我的可观察数组上绑定一个事件，以便在输入时（例如，描述已经改变，它将触发该功能。我已经在线阅读不同的解决方案，但它们似乎都不能使用Typescript。以下是我的代码。

HTML：

<tbody data-bind="foreach: income">
<tr>
<td><input data-bind="value: description, event: {change: save} "/></td>
<td><input data-bind="value: amount"/></td>
</tr>
</tbody>

打字稿：

ko.observableArray.fn['save'] = function () {
  // does something
}
income = ko.observableArray([{ description: 'Description', amount: '0'}]);
this.addIncome.save();

它告诉我，Property＆＃39; saveExtendedBalance＆＃39;类型＆＃39; KnockoutObservableArray＆＃39;中不存在。我该如何重写呢？

Answer 1

我看到你在声明你的knockout observable数组时遇到了问题，如果你想要至少用一个对象初始化你的数组，你必须改变这一行：

income = ko.observableArray({ description: 'Description', amount: '0'});

到此：

income = ko.observableArray([{ description: 'Description', amount: '0'}]);

这是因为您必须初始化并始终将此变量income视为像对象一样初始化的数组。

Answer 2

以下是您想要的完整功能示例：

我还为您提供了从数组中删除元素的功能。

有打字稿代码：

class TestAdd {
    dummyArray: KnockoutObservableArray<string> = ko.observableArray([]);
    dummyToAdd: KnockoutObservable<string> = ko.observable("");

    save = ():void => this.dummyArray.push(this.dummyToAdd());

    deleteElement = (elementToDelete: string):string[] => this.dummyArray.remove(elementToDelete);
}

ko.applyBindings(new TestAdd(), document.getElementById("Test"));

HTML代码：

<section id="test">
    <input type="text" data-bind="value: dummyToAdd, event: {change: save}">
    <h3 data-bind="visible: dummyArray().length > 0">Your array:</h3>
    <ul data-bind="foreach: dummyArray">
        <li><span data-bind="text: $data"></span> - <button data-bind="click: $parent.deleteElement">Delete element</button></li>
    </ul>
</section>

在我的依赖项中，我正在使用"@types/knockout": "^3.4.38"

如何在Typescript

2 个答案: