Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

これは何?

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away