KnockoutJS "checked"と "click"の両方のバインドでチェックボックスをバインドすると、予期しない動作が発生する

Question

ここでは私が取り組んでいるコードを示します。

Javascriptを：ここ

function ViewModel() { 
    var self = this; 

    self.isChecked = ko.observable(false); 

    self.testing = function(){ 
    console.log("hello from testing"); 
    } 
} 

var app = new ViewModel(); 

ko.applyBindings(app); 

とは、HTMLです：

<div> 
    <div> 
    <button data-bind="click: testing" type="button">Something</button> 
    <input data-bind="checked: isChecked, click: testing" type="checkbox" /> 
    <input data-bind="checked: isChecked" type="checkbox" /> 
    </div> 
</div> 

私は何を達成するために探していますが、私はその値で変数にデータバインドされ、チェックボックスを、したいということです私のそれに応じてモデルと更新が行われます。同時に、ユーザがブール値を変更するためにチェックボックスをクリックするたびに、モデルで値が変更された後に関数が実行され、チェックボックスが更新されます。

私はテスト目的のためだけに同じ値にデータバインドされた2つのボタンを持っています。 clickからtestingにバインドされたチェックボックスをクリックすると、チェックマークは変わりませんが、関数は正しく実行されます。しかし、ボタンがクリックされたときに、モデルの変更を反映するためにもう一方のチェックボックスが実際に更新されます。

この現象が発生する原因は何ですか？また、私が探しているものを達成するためのより良い解決策を作成するにはどうすればよいですか？

---

EDIT：だから明らかに、関数にreturn true;を追加することによって、私は...意図した動作に到着するために管理？

function ViewModel() { 
    var self = this; 

    self.isChecked = ko.observable(false); 

    self.testing = function(){ 
    console.log(self.isChecked()); 
    console.log("hello from testing"); 
    console.log(self.isChecked()); 

    return true; 
    } 

} 

var app = new ViewModel(); 

ko.applyBindings(app); 

なぜこのようなことが起こりますか？それは安全ですか？

Answer 1

これはXY problemのようです。だから、@Tomalakは、チェックボックスの値が変更されたときに機能を起動したい場合は、言及したものに加えて、することができますsubscribeオーバーsubscribeを使用してのisChecked観測可能

function ViewModel() { 
 
    var self = this; 
 

 
    self.isChecked = ko.observable(false); 
 

 
    self.isChecked.subscribe(function(newValue) { 
 
    // this gets executed every time "isChecked" changes 
 
    console.log(self.isChecked()); 
 
    console.log(newValue); 
 
    }); 
 
} 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<input data-bind="checked: isChecked" type="checkbox" />

優位にclickバインディングは、このようにプログラムでこのようなチェックボックスの値を設定した場合でも、この関数がトリガされます。self.isChecked(false)