0

タイプスクリプト（0.9）で動作するノックアウトjs（2.21）の紹介チュートリアルを取得しようとしています。データバインディングが機能していないようです。これは、私が数年ぶりに見た JavaScript です。typescript クラスを使用して生成されたビューモデルに 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()。ここでは、戻り値ではなく、計算されたオブザーバブルに関数を渡そうとしています。また、this計算関数で使用する場合は、所有者も渡す必要があります。計算結果を次のように宣言します。

    ko.computed(this.createFullname, this);

    そうすれば、 ifが関数でthis使用されている場合、それは現在のコンテキストでを参照する必要があると言っています。createFullname()thisthis

  2. オブザーバブルは関数です。保持している値を読み取るには、これを呼び出す必要があります。

  3. オブザーバブルに値を保存するには、オブザーバブルを呼び出して、保存する値を引数として渡す必要があります。

更新されたフィドル

対応する typescript は次のようになります。

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 に答える