ノックアウト変数の読み込み中に "変数が関数ではありません"というエラーが発生しました

Question

Webプロジェクトでprototypejsとknockoutを使用しています。

まず、全体の構造を説明しましょう。

私はuserViewModelという名前の基本クラスを持ち、accNumberという名前の変数がこのクラス定義で宣言されています。

userViewModel = Class.create(baseViewModel , { 
     accNumber: ko.observable("") 
}); 

私の基本クラスから派生した別のクラスがあり、accNumberComputedという名前の計算された変数がこの派生クラスで宣言されています。私はaccNumberComputed変数を更新したい

femaleUserViewModel = Class.create(userViewModel , { 
     accNumberComputed : ko.pureComputed({ 
       read: function() { 
        return this.accNumber();  
       }, 
       write: function (value) { 
        this.accNumber(value); 
       }, 
       owner: this 
     }) 
}); 

はaccNumber観察可能な変数に依存します。そのため、accNumber変数の変更はaccNumberComputed変数で追跡されます。

ただし、this.accNumber()ステートメントの使用方法は、 "TypeError：this.accNumberは関数ではありません"というエラーメッセージを返します。 私が知る限り、観察可能な変数は、関数呼び出し演算子を使って読み取らなければなりません。

この問題について教えてください。あなたは少し深く掘る場合

Answer 1

、あなたはあなたの例ではthis.accNumberが機能だけでなくないが、それは実際にundefinedだということを知るでしょう。

計算されたreadメソッドのthisは、windowを指します。

私はprototypejsライブラリに精通していませんが、おそらくインスタンスに正しくバインドさせる方法があります。

ドキュメントをすばやく見て、「プレーンなjavascriptのアプローチ」で動作する方法と似た方法を見ました。これは次のように機能します。

1. observableとcomputedをプロトタイプに追加するのではなく、コンストラクタで作成します。 （prototypejsでinitialize）

これ：

var userViewModel = Class.create(baseViewModel , { 
    accNumber: ko.observable("") 
}); 

になる：

var userViewModel = Class.create(baseViewModel, { 
    initialize: function() { 
    this.accNumber = ko.observable(""); 
    } 
}); 

明示的に拡張クラスのコンストラクタ基本クラスを呼び出す

コンストラクタ。

ない、それはそれを行うための最善の方法ですが、同じように行うことができるかどうかを確認します。あなたの例では

var Extended = Class.create(Base, { 
    initialize: function() { 
    Extended.superclass.prototype.initialize.call(this); 

、これはあなたが買ってあげるものです：

var baseViewModel = Class.create({ 
 
    initialize: function() { 
 
    this.base = "base"; 
 
    } 
 
}); 
 

 
var userViewModel = Class.create(baseViewModel, { 
 
    initialize: function() { 
 
    this.accNumber = ko.observable("1"); 
 
    } 
 
}); 
 

 
var femaleUserViewModel = Class.create(userViewModel, { 
 
    initialize: function() { 
 
    femaleUserViewModel.superclass.prototype.initialize.call(this); 
 
    
 
    this.accNumberComputed = ko.pureComputed({ 
 
     read: function() { 
 
     return this.accNumber(); 
 
     }, 
 
     write: function(value) { 
 
     this.accNumber(value); 
 
     }, 
 
     owner: this 
 
    }) 
 
    } 
 
}); 
 

 
var janeDoe = new femaleUserViewModel(); 
 
console.log(janeDoe.accNumberComputed()); 
 
janeDoe.accNumberComputed(2); 
 
console.log(janeDoe.accNumberComputed());

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>