3

javascript でチェックボックスの状態を変更することは、MVVM の精神と一致しません。しかし、チェックボックス、ラジオボタン、選択ボックスなどの標準コントロールを見栄えよくするために、一般的な JavaScript ライブラリを作成しています。次のビューモデルに基づいています。

function MyViewModel() {
  var self = this;

  self.ok = ko.observable();

};

var vm = new MyViewModel();
ko.applyBindings(vm);

しかし、チェックボックスのチェック状態をプログラムで変更すると、ノックアウトに関連して問題が発生します。

document.getElementById('chk').checked = true

変更はビューモデルのプロパティには表示されません。しかし、チェックボックスをクリックすると、すべて正常に動作します。

http://jsfiddle.net/KWdZB/1/を見てください

回避策はありますか？

4

2 に答える 2

5

あなたの問題は、koがチェックされたバインディングclick内のイベントをサブスクライブすることです：

ko.utils.registerEventHandler(element, "click", updateHandler);

ただし、checked属性を変更してもクリックイベントはトリガーされないため、koは通知されません。

属性の変更後に手動でクリックイベントをトリガーすると、機能する可能性があります...

純粋なJavaScriptでそれを行う方法はわかりませんが、jQueryを使用すると次のように記述できます。

$('#chk').attr('checked', true).triggerHandler('click')

これでテストできますJSFiddle。

于 2012-10-22T10:04:39.997 に答える
1

チェックされたバインディングハンドラーはチェックされた変更イベントをサブスクライブしないが、クリックイベントハンドラーをサブスクライブするため、これは正常です（チェックされたバインディングハンドラーコードでソースファイルを確認できます）。

クリックで値を変更する必要がある場合は、okobservable値を使用する必要があります。

HTMLがあります

<div>
    <input type="checkbox" id="chk" data-bind="checked: ok"/><br>
    <input type="button" id="btnCheck" value="Check" data-bind="click: Check"/>&nbsp;&nbsp;    
    <input type="button" id="btnUnCheck" value="Uncheck" data-bind="click:Uncheck"/> 
</div>
<div>
    Value: <span data-bind="text: ok"></span>    
</div>

そしてjavascript：

function MyViewModel() {
    var self = this;

    self.ok = ko.observable();

    self.Check = function(){
      self.ok(true);      
    }

    self.Uncheck = function(){
        self.ok(false);            
    }
};

vm = new MyViewModel();
ko.applyBindings(vm);

このフィドルでそれを見ることができます。

于 2012-10-22T10:05:42.647 に答える