knockout.js - 通常の JavaScript 関数と計算された関数のノックアウトの違い

Question

同じ結果を得るために、2 つの方法でビューモデルに関数を記述できるようです。

通常の JavaScript 関数:

vm.Texts = function () {
  var self = vm;
  if (self.selectedFormat()) {
    return self.selectedFormat().Texts();
  }
};

ko の計算:

vm.Texts = ko.computed(function () {
  var self = vm;
  if (self.selectedFormat()) {
    return self.selectedFormat().Texts();
  }
});

'vm' はビューモデルであり、selectedFormat はビューモデルのオブザーバブルです。どちらの場合も、selectedFormat が変更されると、関数がトリガーされます。私の質問は、2 つの方法の違いは何ですか?

score 4 · Accepted Answer

これらの行に沿ったデータバインディングを想定しています：

<span data-bind="text: Texts()"></span>

結論:
どちらの場合も、textselectedFormatバインディングは初期レンダリングへの依存関係を作成します。

詳細:どちらの状況も次の理由で
更新されます。span

機能ケース。バインディングは、最初のレンダリングで、オブザーバブルが関数で呼び出されているためtext、オブザーバブルに依存していることに気付きます。selectedFormatオブザーバブルが変更されると、KO のレジスタでその依存関係が検出され、textバインディングの更新がトリガーされます。依存関係は次のようになります。

text binding --> depends-indirectly-on --> selectedFormat

このフィドルを参照してください。
計算されたケース。Texts2 番目のケースは、オブザーバブルの仲介者として機能する (計算された) オブザーバブルに依存しているため、もう少し明白ですが、同じように機能する可能性がありselectedFormatます。依存関係は次のとおりです。

text binding --> depends-on --> Texts computed --> depends-on --> selectedFormat

このフィドルを参照してください。

1 に答える 1