Question

我正在为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>中没有显示任何内容{1}}代码。

所以问题是，是否可以更改类的属性，或者我只需要更改变量？

Answer 1

更好的解决方案是更改Person类以在构造函数中创建observable：

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创建一个类也是更好的。

Answer 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); 
};

我没有告诉应该改变人物属性的功能。

带有对象的Knockout / Typescript ko.observables

2 个答案: