mvvm - 「クリック」バインディングでオブザーバブルを設定することは可能ですか?

Question

「クリック」バインディングでオブザーバブルを設定することは可能ですか?

<div data-bind="click:toolbarBottomTabs_selectedIndex(0)">

ここで、toolbarBottomTabs_selectedIndex はオブザーバブルです。

Answer 1

これを試して：

 <div data-bind="click: toolbarBottomTabs_selectedIndex.bind($data, 0)">

Answer 2

「click: function(){...}」と書くのは、最善の解決策ではありません。コードが数行増えただけでも、これは少し良くなると思います。

<div data-bind="click: resetIndex">....</div>

ビューモデルで次を定義します。

function resetIndex(){
    toolbarBottomTabs_selectedIndex(0);
}

Answer 3

可能ですが、正しい選択ではないと思います：

<div data-bind="click:toolbarBottomTabs_selectedIndex.bind($data, 0)">

Bind特定の値で関数を呼び出すことができます（オブザーバブルは関数です）。bind の最初の引数はthisオブジェクトの値で、2 番目は関数の最初のパラメーターです。

Answer 4

私はこれについてアンダースに同意します...

MVVM の要点は、ビューをビュー ロジックから切り離して、テストや再利用などを行えるようにすることです。

この方法でビューモデル内に含まれるデータを操作することはうまくいきますが、理想的ではありません。

<div data-bind="click: function() { toolbarBottomTabs_selectedIndex(0) }">

Knockout は、目立たないイベント ハンドラーを使用してこれを実装するためのよりクリーンな方法を提供します。

あなたの例では、次のようなことをする必要があります...

<div id="clickme">...</div>

...そして、JavaScriptに以下を含めます

$('#clickme').on('click', function(e) {
    ko.dataFor(this).toolbarBottomTabs_selectedIndex(0);
});