9

localStorage に状態を保持するために書いているインフラストラクチャによって値が調整される単純なチェックボックスがあります。これは通常、viewModel を設定することで行われることは承知していますが、インフラストラクチャはノックアウト バインディングを認識せず、それらにアクセスできません。

ノックアウトが「変更」イベントから実行されていると想定していたので、これが問題になるとは思いませんでしたが$checkbox.prop('checked', true).trigger('checked')、オブザーバブルをトリガーできませんでした。クリック イベントを直接使用しても、必要なものが得られません。

ノックアウトはどのイベントに接続しますか? コントロールの状態を読み取るにはどうすればよいですか?

ここでこの奇妙な動作を示す jsbin。ボタンをクリックするのではなく、チェックボックスを直接選択してみてください。

4

7 に答える 7

1

ビューモデルを介してチェックボックスのチェック済みステータスを変更する必要があります。

 var m = {
   isChecked: ko.observable(false)
  //,infrastructureUpdatesCheckbox: function() {
    //$chk = $(':checkbox');
    //$chk
    //  .prop('checked', !$chk.prop('checked'))
    //  .trigger('change');
    //this.isChecked(!this.isChecked());  // this - is your view model
 }
};

ここに更新されたバージョンがあります：

function InfrastructureUpdatesCheckbox(){

  var $cb = $(':checkbox');
  var cb = $cb[0];
  cb.checked = !cb.checked;  // manually change checked status
  $cb.triggerHandler('click');  // run all event handlers bound to 'click' event
}

この問題はチェックボックス（ラジオボタン）のみに関連していると思います。イベントを手動でトリガーする場合、他のコントロールは正しく動作する必要があります。

于 2013-01-03T18:13:48.307 に答える
1

私の場合、これは jquery のバグに関連していることが判明しました。これを追跡するために github ノックアウト イシュー トラッカーを利用しました。ここを参照してください。

最終的に、私は自分のコンポーネントでこれを行うことになりました:

var isjQueryOld = /^(0|1)\.[0-8]\./.test($.fn.jquery); // <=1.8.*
var toggleCheckbox = isjQueryOld ? jQueryOldToggleCheckbox : function($el) { $el.trigger('click') } //https://github.com/knockout/knockout/issues/987


function jQueryOldToggleCheckbox($el) {
    //This should be simple right? See http://stackoverflow.com/a/8595601/5056
    //and "simulating events to adjust knockout models" jasmine spec
    //all this is nessessary to get everything working with knockout
    var changeTo = !$el.prop('checked');
    if(changeTo)
        $el.attr('checked', true);
    else
        $el.removeAttr('checked');
    $el.trigger('click');
    $el.prop('checked', changeTo);
}

そして私のコードでは

        toggleCheckbox($el);
于 2013-12-10T16:10:09.247 に答える
1

ノックアウト バインディングは、あなたが考えているようには機能しません。

チェックアウト: http://knockoutjs.com/documentation/custom-bindings.html

これは、jQuery やカスタム バインディングを使用しない、使用できる 1 つのソリューションです。

あなたのhtmlは同じままです。

var m = {
  isChecked: ko.observable(false),
  infrastructureUpdatesCheckbox: function() {
    this.isChecked( this.isChecked() === true ? false : true);
  }
};

ko.applyBindings(m);
于 2013-01-03T17:19:13.600 に答える
0

ノックアウトがどのイベントをリッスンしているかはわかりません。おそらくソース自体に足を踏み入れて理解することができますが、1 つの解決策はカスタム バインディングを使用することです。カスタムバインディングの では、initキャプチャしたいイベント ( などchanged) に必要なハンドラーを設定し、それを使用してバインディングを強制的に実行できますupdate。

于 2013-01-03T19:05:44.643 に答える