Question

尝试使用typescript（0.9）获取knockoutjs（2.21）介绍教程。数据绑定似乎不起作用。这是我多年来第一次看到的javascript。我想我错过了如何正确地将html连接到使用typescript类生成的viewmodel。只有在我尝试将该类引入教程时才会出现问题。这是jsfiddle。

HTML片段：

<body>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go Caps</button>
</body>

打字稿片段

class koIntroductionViewModel {
    firstName: any;
    lastName: any;
    fullName: any;

    constructor() {
        this.firstName = ko.observable("Bert");
        this.lastName = ko.observable("Bertington");
        this.fullName = ko.computed(this.createFullname());
    }

    createFullname() {
        return this.firstName + " " + this.lastName;
    }

    capitalizeLastName() {
        var currentVal = this.lastName;
        this.lastName = currentVal.toUpperCase();
    }
}

window.onload = () => {
    ko.applyBindings(new koIntroductionViewModel());
}

生成的javascript

var koIntroductionViewModel = (function () {
    function koIntroductionViewModel() {
        this.firstName = ko.observable("Bert");
        this.lastName = ko.observable("Bertington");
        this.fullName = ko.computed(this.createFullname());
    }
    koIntroductionViewModel.prototype.createFullname = function () {
        return this.firstName + " " + this.lastName;
    };

    koIntroductionViewModel.prototype.capitalizeLastName = function () {
        var currentVal = this.lastName;
        this.lastName = currentVal.toUpperCase();
    };
    return koIntroductionViewModel;
})();

window.onload = function () {
    // Activates knockout.js
    ko.applyBindings(new koIntroductionViewModel());
};

Answer 1

javascript代码应该更像这样：

var koIntroductionViewModel = (function () {
    function koIntroductionViewModel() {
        this.firstName = ko.observable("Bert");
        this.lastName = ko.observable("Bertington");
        this.fullName = ko.computed(this.createFullname, this); // 1
    }
    koIntroductionViewModel.prototype.createFullname = function () {
        return this.firstName() + " " + this.lastName(); // 2
    };

    koIntroductionViewModel.prototype.capitalizeLastName = function () {
        var currentVal = this.lastName(); // 2
        this.lastName(currentVal.toUpperCase()); // 3
    };
    return koIntroductionViewModel;
})();

你不应该调用createFullname()函数，在这里，你试图将函数传递给计算的observable，而不是它的返回值。此外，如果您要在计算函数中使用this，则还必须传入所有者。通过将计算结果声明为：
```
ko.computed(this.createFullname, this);
```
这样，您就说this函数中使用了createFullname()，this应该引用当前上下文中的this。
Observables是函数。你必须调用它来读取它所拥有的值。
要在observable中存储值，必须调用传递值的observable作为参数存储。

Updated fiddle

相应的打字稿将是：

class koIntroductionViewModel {
    firstName: any;
    lastName: any;
    fullName: any;

    constructor() {
        this.firstName = ko.observable("Bert");
        this.lastName = ko.observable("Bertington");
        this.fullName = ko.computed(this.createFullname, this);
    }

    createFullname() {
        return this.firstName() + " " + this.lastName();
    }

    capitalizeLastName() {
        var currentVal = this.lastName();
        this.lastName(currentVal.toUpperCase());
    }
}

Answer 2

给这个修改过的小提琴一个镜头..

http://jsfiddle.net/9nnnJ/5/

var koIntroductionViewModel = (function () {
    var self = this;
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(function () {
        return self.firstName() + " " + self.lastName();
    });


    this.capitalizeLastName = function() {
        var currentVal = self.lastName();
        self.lastName(currentVal.toUpperCase());
    };

});


var model = new koIntroductionViewModel();

ko.applyBindings(model);

打字稿knockoutjs数据绑定不起作用

2 个答案: