Question

我有以下打字稿代码：

///<reference path="typings/jquery/jquery.d.ts" />
///<reference path="typings/knockout/knockout.d.ts" />
///<reference path="typings/bootstrap/bootstrap.d.ts" />
///<reference path="typings/knockout.mapping/knockout.mapping.d.ts" />

class Municipality {
    id: KnockoutObservable<number>;
    name: KnockoutObservable<string>;

    constructor(
            id: number,
            name: string) {

        this.id = ko.observable(id);
        this.name = ko.observable(name);
    }
}

class SettingsViewModel {
    public municipality: KnockoutObservable<Municipality>;

    constructor() {
        this.municipality = ko.observable(new Municipality(0, ""));
    }

    editName = function (item) {
        $('#editValueDialog').modal('show');
    }

    submitUpdate = function () {
        var data = ko.mapping.toJSON(this.municipality());
        console.log(data);
    };
}

$(document).ready(function () {
    var serverData = JSON.parse($("#serverJSON").val());
    console.log(serverData);
    vm.municipality(new Municipality(serverData.Id, serverData.Name));
});

var vm: SettingsViewModel;
vm = new SettingsViewModel();
ko.applyBindings(vm);

在我看来，我试图只有一个简单的输入字段：

<input type="text" data-bind="value: vm.municipality().name()">

name的值在输入字段中可见，但在更改它时，触发submitUpdate事件时，值没有更改，在检查控制台中的属性时也没有更改。

如果我输入：

vm.municipality().name('test')

在控制台中，值会发生变化。

我错过了什么？

Answer 1

快速解决方法是使用vm.municipality（）。name.valueHasMutated（）但有点看起来绑定出错了somwhere ..。可以将输入字段放在带有绑定的上下文中，这样你就可以做出像这样：

<!-- ko with: vm.municipality -->
    <input type="text" data-bind="value: name">
<!-- /ko -->

不知道这段代码是否有效，对不起TS编译器，我没有时间将你的代码转换为vanilla JS。

希望其中一些有帮助

Answer 2

submitUpdate = function () {
    var data = ko.mapping.toJSON(this.municipality());
    console.log(data);
};

在此使用箭头函数 - 触发this时，submitUpdate值在运行时可能出错：

submitUpdate = () => {
    var data = ko.mapping.toJSON(this.municipality());
    console.log(data);
};

输入输入字段时，Observable不会更新

2 个答案: