ノックアウトjsが、バインディングコンテキストとビューモデルは非常に混乱している

Question

私はビューとビューモデルを結合し、

var viewModel = { 
    name: ko.observable('Steve') 
}; 

ko.applyBindings(viewModel); 

はdiv要素は、名前のスティーブを示しJavaScriptの

HTML

<div data-bind="text: $data.name"></div> 

。バインディングコンテキストには$ dataプロパティが含まれており、$ dataが参照するviewModelの名前をdiv要素にバインドします。という事は承知しています。しかし、私が理解していないのは、divタグのデータバインドで$データを削除しても、それはまだ機能しているということです。 $ dataがなければ、nameは存在しない "name"というバインディングコンテキスト内のプロパティを直接参照していませんか？ $データが存在しない場合のボンネットの下で何が起こるのですか？

Answer 1

ノックアウトがwithブロックを使用しているために動作します。あなたがin the sourceを見ることができるように

"with($context){with($data||{}){return{" + bindingValue + "}}}"; 

：あなたのtextのバインディング戻り値は内にラップされます。

このコードは、最初にviewmodelプロパティが検索されることを意味します。プロパティが存在しない場合、ノックアウトはそれがバインディングコンテキストにあるかどうかをチェックします。

は、ここでは、ソートの動作方法の例です：

var vm = { 
 
    vmProp: 'VMPROP' 
 
}; 
 

 
var bindingCtx = { 
 
    $ctxProp: 'CTXPROP', 
 
    $data: vm 
 
}; 
 

 
function log() { 
 
    with(bindingCtx) { 
 
    with($data) { 
 
     console.log(vmProp);  // Works 
 
     console.log($ctxProp);  // Also works 
 
     console.log($data.vmProp); // Also works 
 
    } 
 
    } 
 
} 
 

 
log();

Answer 2

documentationによると、 2番目のパラメータがko.applyBindingsに存在しない場合、現在のコンテキストのviewModelオブジェクトがbodyタグに適用されます。これは、applyBindingsにrootNodeという2番目のパラメータを含めないためです。それはbodyタグに$dataを適用します。したがって、bodyタグのどこにでもviewModelpropertiesとfunctionsを使用することができます。