Javascript 敲除/键入脚本ko.可观察到的对象_Javascript_Html_Typescript_Knockout.js

Javascript 敲除/键入脚本ko.可观察到的对象

javascript html typescript knockout.js

Javascript 敲除/键入脚本ko.可观察到的对象,javascript,html,typescript,knockout.js,Javascript,Html,Typescript,Knockout.js,我正在做击倒的入门教程，教程的第二部分是关于可观测的，我在我的.ts later.js上有以下代码： /// <reference path="../typings/index.d.ts" /> $(document).ready(function () { ko.applyBindings(new ViewModel()); }); class Person { firstName: string; lastName: string; con

我正在做击倒的入门教程，教程的第二部分是关于可观测的，我在我的.ts later.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应用程序时，它不会在我的标记上显示MyName和MyLastName，而在我的标记中写入时，它不会显示任何内容

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

好的，我发现了问题，问题出在我的打字脚本上，而不是：

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

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

更好的解决方案是更改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标记。你使用文本绑定吗？还要检查开发人员工具控制台以查看是否存在任何错误。你还为typescript安装了敲除类型吗？我找到了一个答案，我在这里提出了一个不同的问题：它是关于绑定到html标记的错误属性。在这个新场景中，它是一个组合框选择，因此要绑定的正确属性是值而不是文本。感谢你对这个问题的回答，tho，在我写上述评论的那一刻，我没有意识到我对不正确的财产有约束力，因为我不知道，