ノックアウトJS宣言的バインディングの内部的な動作

Question

ボタンをクリックすると特定のdivを表示または非表示にするコードを記述しました。コードはthis fiddleです。 コードはうまくいきましたが、疑問は、ボタンのクリックでobservable aとbの値を変更すると、toShowメソッドはどのように呼び出されますか？

「testViewModel」で何か変わるたびに呼び出されますか？ の中にはいつでも()を使用する必要がありますか？

HTMLコード：

<button data-bind="click: $root.changeValue">Click Me!</button> 
<div data-bind="foreach: products"> 
    <div data-bind="visible: $root.toShow()"> 
    <div data-bind="text: name"></div> 
    <div data-bind="text: age"></div> 
    <div data-bind="text: gender"></div> 
    </div> 
</div> 

Javascriptのコード：

function testViewModel(){ 
    var self = this; 
    self.a = ko.observable(0); 
    self.b = ko.observable(0); 
    var prod = []; 
    for(var item in products){ 
    prod.push(new productItem(products[item])); 
    } 
    self.products = ko.observableArray(prod); 
    self.changeValue = function(){ 
    self.a(self.a()+1); 
    self.b(self.b()+1); 
    } 
    self.toShow = function(){ 
    if(self.a() % 2 === 0){ 
     return true; 
    } 
    else{ 
     return false; 
    } 
    } 
} 

function productItem(product){ 
    var self = this; 
    self.name = ko.observable(product.name); 
    self.age = ko.observable(product.age); 
    self.gender = ko.observable(product.gender); 
} 

var products = [ 
{ 
    name: 'A', 
    age: 25, 
    gender: 'Male' 
}, 
{ 
    name: 'B', 
    age: 27, 
    gender: 'Female' 
}, 
{ 
    name: 'C', 
    age: 53, 
    gender: 'Female' 
}, 
{ 
    name: 'D', 
    age: 54, 
    gender: 'Male' 
} 
] 

ko.applyBindings(new testViewModel()); 

Answer 1

最初の質問は、言い換え：

<div data-bind="visible: $root.toShow()">...</div> 

self.a = ko.observable(0); 
self.b = ko.observable(0); 
self.toShow = function(){ 
    if(self.a() % 2 === 0){ 
    return true; 
    } 
    else{ 
    return false; 
    } 
} 

を...私はtoShowメソッドが呼び出されるか来た後、ボタンをクリックする上で観察aまたはbの値を変更するとき？

あなたのビューでいかなる有効なデータ・バインド式を持つたびに、ノックアウトは、最初の評価時にデータバインドの値に影響を与えるobservable（税込。観察可能な配列など）を追跡するために、依存関係ツリーを登録します表現。それは、単純なオブザーバブルにバインドするためだけでなく、あなたが持っているような関数にもバインドします。

これはdata-bind="visible: $root.toShow()はノックアウトはそれがaに依存していることを最初の評価時に参照します（ただし、b上ない！）、およびaが変化するたびに、それが再評価visibleが結合ますことを意味します。

2番目の質問：

は...私は、データバインド内()を使用する必要がありますか？

これは既にasked beforeですが、回答はまだ完全ではありませんが、現在IMHOです。

1. 、観察が機能で、引数なしでそれを呼び出すその現在の値を取得します。これら二つのことを知っています。
2. ノックアウトは、観測可能な名前がデータバインド式の唯一のものと見なされる場合、それらのカッコを「魔法のように」追加します。

は、だから、だ常に安全とデータバインド内部myObservable()を行うには、オプション、およびすることができます時々（例えば、観察名前は表現のビットだけであるとき）括弧をオフのままに。

P.S.：

あなたの質問のタイトルは「内部的な仕組み」と尋ねるので、ノックアウトはopen sourceであり、e.g. the expression rewritingを見ることができます。

Answer 2

あなたの例では、ビューがレンダリングされますときtoShow、一度だけトリガされます。計算されたノックアウトは、あなたがこれをしなければならない依存関係を追跡できるようにするため

<code> 
self.toShow = ko.computed(function(){ 
    var x = self.a(); 
    if(x % 2 === 0){ 
     return true; 
    } 
    else{ 
     return false; 
    } 
}); 
</code> 

は、私がもしなステートメントの前に値に観察Aを取得してい通知を取る - これはノックアウトは常に、この計算では、この依存関係を追跡していることを確認してくださいためのものです。あなたの例では、それが他のブランチに行くなら、aへの依存関係はもうなくなります。

第2の質問については、ブラケットは計算と観測では必要ありません。単純な関数にはそれらが必要です。