KnockoutJsでのko.computedが発火しなくてハマったのでメモ

これは何？

• kockoutjs で ko.computedが発火しなくてハマってしまったのでメモ
• Js初心者なので当たり前なのかもしれないけど･･･戒めとして。

状況説明

正常動作例

<p>ファーストネーム: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
<p>ラストネーム: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

var ViewModel = function(first, last) {
    var self = this;
    self.firstName = ko.observable(first);
    self.lastName = ko.observable(last);

    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    }, self);
};

ko.applyBindings(ViewModel);

ソースの元ネタは、Hello World デモ　です。

動かない例

    // 略
    self.fullName = ko.computed(function() {
        return self.firstName + " " + self.lastName;
    }, self);
　　// 略

解決策

1. 値の呼び出しに、self.firstNameやself.lastNameをプロパティとして呼び出している点がだめ。self.firstName()やself.lastName()として呼び出す必要あり。
2. <p>ファーストネーム: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>　の時、値の設定になるので、firstNameで呼び出す。firstName()ではないということ。

ハマった理由として、エラーにもならないし、ko.comuputedのメソッドも発火しないし･･･なんなんだ？という感じでした。

なんでそうなるか？についてはよくわからない。Jsへの理解語りないのかもしれない。教えてもらえるとうれしい･･･。