0

试图让 knockoutjs (2.21) 介绍教程与 typescript (0.9) 一起使用。数据绑定似乎不起作用。这是我多年来看到的第一个 javascript。我想我错过了如何正确地将 html 连接到使用打字稿类生成的视图模型。仅在我尝试将课程介绍给教程时才出现问题。这是一个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());
};
4

2 回答 2

3

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

  1. 你不应该调用createFullname()函数，在这里，你试图将函数传递给计算的 observable，而不是它的返回值。此外，如果您要this在计算函数中使用，则还必须传入所有者。通过将计算声明为：

    ko.computed(this.createFullname, this);

    那样的话，你是说如果this在createFullname()函数中使用，那this应该是指this当前上下文中的。

  2. Observables 是函数。你必须调用它来读取它持有的值。

  3. 要将值存储在 observable 中，您必须调用 observable 传入值以存储为参数。

更新的小提琴

相应的打字稿将是：

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());
    }
}
于 2013-06-25T20:00:26.690 回答
0

试试这个修改过的小提琴..

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);
于 2013-06-25T20:00:29.457 回答