Knockout/Typescript ko.observables 与对象答案

【问题标题】：Knockout/Typescript ko.observables with objectsKnockout/Typescript ko.observables 与对象
【发布时间】：2017-09-07 00:36:33
【问题描述】：

我正在为 Knockout 做介绍教程，教程的第二部分是关于 observables，我的 .ts（后来的 .js）上有以下代码：

/// <reference path="../typings/index.d.ts" />

$(document).ready(function () {
    ko.applyBindings(new ViewModel());
});

class Person {

    firstName: string;
    lastName: string;

    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName
    }
}

var ViewModel = function () {

    var person = new Person('MyName', 'MyLastName');
    this.person = person;

    this.person = ko.observable(person.firstName);
    this.person = ko.observable(person.lastName);
};

我的 cshtml 中有以下内容：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <script src="~/bower_components/jquery/dist/jquery.js"></script>
    <script src="~/bower_components/knockout/dist/knockout.js"></script>
    <script src="~/Scripts/greeter.js"></script>

    <title>Index</title>
</head>
<body>
    <div> 
        <p>FirstName: </p> <p data-bind="text: person.firstName"></p>
        <p>LastName: </p> <p data-bind="text: person.lastName"></p>

        <p>First name: <input data-bind="value: person.firstName" /></p>
        <p>Last name: <input data-bind="value: person.lastName" /></p>
    </div>
</body>
</html>

当我运行网络应用程序时，我的<p> 标签上没有显示“MyName”和“MyLastName”，而当我在我的<input> 中写入时，它没有在我的<p> 标签中显示任何内容。

所以问题是，可以更改类的属性还是只需要更改变量？

【问题讨论】：

标签： javascript html typescript knockout.js

【解决方案1】：

更好的解决方案是更改Person 类以在构造函数中创建可观察对象：

class Person {
    firstName: KnockoutObservable<string>;
    lastName: KnockoutObservable<string>;

    constructor(firstName: string, lastName: string) {
        this.firstName = ko.observable(firstName);
        this.lastName = ko.observable(lastName);
    }
}

var ViewModel = function () {
    this.person = new Person('MyName', 'MyLastName');
};

为 ViewModel 创建一个类会更好。

【讨论】：

我同意你的回答，我在同一个教程中看到它并且有道理，少写。
我遇到了问题，这些值没有绑定到我的 p 标签
您使用的是text 绑定吗？还要检查开发人员工具控制台，看看是否有任何错误。你还为打字稿安装了敲除类型吗？
我找到了答案，我在这里提出了一个不同的问题：stackoverflow.com/questions/43453285/typescript-and-knockout-js 这是关于绑定到不正确的 html 标签属性。在这个新场景中，它是一个组合框（选择），因此要绑定的正确属性是值而不是文本。感谢您对这个问题的回答，在我写上述评论的那一刻，我没有意识到我绑定到了不正确的属性，因为我不知道，

【解决方案2】：

好的，我找到了问题，它在我的打字稿上，而不是：

var ViewModel = function () {

    var person = new Person('MyName', 'MyLastName');
    this.person = person;

    this.person = ko.observable(person.firstName);
    this.person = ko.observable(person.lastName);
};

应该是：

var ViewModel = function () {

    var person = new Person('MyName', 'MyLastName');
    this.person = person;

    this.person.firstName = ko.observable(person.firstName);
    this.person.lastName = ko.observable(person.lastName); 
};

我没有告诉应该改变人物属性的函数。

【讨论】：