別のラジオボタンの値を変更する

Question

1つのオプションをクリックすると、他のすべてのオプションを "X"で変更するオプションリストを作成する必要があります。選択したオプションが選択されたままでいないことを除いて、正常に動作しています。誰が何が間違っているのか分かりますか？

var data = [{ 
 
    name: "CheckBox1", 
 
    status: " " 
 
}, { 
 
    name: "CheckBox2", 
 
    status: "X" 
 
}, { 
 
    name: "CheckBox3", 
 
    status: "X" 
 
}]; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.list = ko.mapping.fromJS(data); 
 

 
    self.change = function(data) { 
 
    for (i = 0; i < self.list().length; i++) 
 
     self.list()[i].status("X"); 
 
    data.status(" "); 
 
    return true; 
 

 
    } 
 

 
} 
 

 
ko.applyBindings(new ViewModel(data));

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

 

 
<!--ko foreach: $root.list--> 
 
<!-- ko with: $data --> 
 
<label data-bind="text: name"></label> 
 
<input type="radio" data-bind="checkedValue: status() === ' ', click:$root.change" /> 
 
<!--/ko--> 
 
<!--/ko--> 
 

 
<!--ko foreach: $root.list--> 
 
<!-- ko with: $data --> 
 
<p data-bind="text: name"></p> 
 
<p data-bind="text: status"></p> 
 

 
<!--/ko--> 
 
<!--/ko-->

Answer 1

https://jsfiddle.net/ptk2jf8v/20/

<input type="radio" name="optradio" data-bind="checkedValue: status() === ' ', click:$root.change,value:status" /> 

からトリックに

を行いますクリックハンドラからtrueを返す：http://knockoutjs.com/documentation/checked-binding.html

バインディングにcheckedValueも含まれている場合、これは要素のvalue属性の代わりにチェックされたバインディングによって使用される値 を定義します。 これは、値が 文字列（整数やオブジェクトなど）以外の値になるようにする場合や、値 を動的に設定する場合に便利です。

ステータスが空の場合は、チェックされているとマークします。

また、クリックイベントは、ラジオボタンで発生しているデフォルトのアクションで狂っています。デフォルトではknockout js radio button click event reset selection

から

、ノックアウトは、任意の デフォルトのアクション

ので

泡立ちを助けるクリックイベントからtrueを返すを取ってからクリックイベントを防ぐことができます。

Answer 2

あなたは（ノックアウトウェブサイト上のような）のラジオボタンをバインドする方法をやり直す場合は、手動でチェックする値を更新する必要はありません。チェックバインディングはブール式であるため、チェックバインドは実質的に双方向バインディングの代わりに一方向バインディングです。データはインターフェイスを駆動しますが、インターフェイスはデータを駆動しません。このため、クリック機能のボックスを手動で 'チェック'する必要があります。つまり、あなたの例を最小限に修正するために、私はそれを少し微調整して動作させることができました。

編集：これでサンプルが「仕事」になる間に、チェックされたバインディングが解除されるようになりました。だから...もしあなたがデータを更新するならば、それはコントロールを運転しないでしょう。

チェックされたバインディング内の呼び出し括弧を削除します。これは、データが更新された後にラジオボタンが更新されなかった理由の一部です。

<input type="radio" name="optradio" data-bind="checked: status == ' ', click: $root.change" /> 

コントロールが結合しているコレクションではなく、着信データ・パラメータの値を変更します。コレクションを直接変更しない場合、コントロールが参照しているオブジェクトは更新されません。基本的に値渡しと参照渡しのようなものです。

for (i = 0; i < self.list().length; i++){ 
    if(self.list()[i].name() == data.name()){ 
    self.list()[i].status(' '); 
    } 
    else{ 
    self.list()[i].status('X') 
    } 
} 

var data = [{ 
 
    name: "CheckBox1", 
 
    status: " " 
 
}, { 
 
    name: "CheckBox2", 
 
    status: "X" 
 
}, { 
 
    name: "CheckBox3", 
 
    status: "X" 
 
}]; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.list = ko.mapping.fromJS(data); 
 

 
    self.change = function(data) { 
 
    for (i = 0; i < self.list().length; i++){ 
 
    \t if(self.list()[i].name() == data.name()){ 
 
     \t self.list()[i].status(' '); 
 
     } 
 
     else{ 
 
     \t self.list()[i].status('X') 
 
     } 
 
    } 
 
    for (i = 0; i < self.list().length; i++) 
 
     alert(self.list()[i].status()); 
 

 
    return true; 
 
    } 
 

 
} 
 

 
ko.applyBindings(new ViewModel(data));

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

 

 
<!--ko foreach: $root.list--> 
 
<!-- ko with: $data --> 
 
<label data-bind="text: name"></label> 
 
<input type="radio" name="optradio" data-bind="checked: status === ' ', click:$root.change" /> 
 
<!--/ko--> 
 
<!--/ko-->