Knockout/Typescript ko.observables with objects

我正在做Knockout的介绍教程，教程的第二部分是关于可观察量的，我的.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>

当我运行 Web 应用程序时，它不会在我的 <p> 标签上显示"MyName"和"MyLastName"，它不会显示任何内容，当我在<input>中编写时，它不会在我的<p>标签中显示任何内容。

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

更好的解决方案是更改 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 创建一个类。

好的

，我发现了问题，它出在我的打字稿上，而不是：

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

我没有告诉应该更改人员属性的函数。

相关内容

最新更新

热门标签：