1

Knockoutを使用して、ビューモデルの親子関係をビューのラジオボタン選択として表すと、奇妙な問題が発生しました。

以下の例では、2つのアプリケーションを表すビューモデルがあります。各アプリケーションには、3つのロールと選択されたロールIDが含まれています。

ビューでは、各アプリケーションの下のロールをラジオボタンのリストとして表示します。値が親の選択された役割IDと一致するボタンをチェックする必要があります。

<script src='knockout-2.0.0.js' type='text/javascript'></script>
<script src='knockout.mapping.js' type='text/javascript'></script>

<ul data-bind='template: { name: "applicationTemplate", foreach: Applications }'></ul>

<script type='text/html' id='applicationTemplate'>
  <li><span data-bind='text: Name'></li>
  <ul data-bind='template: { name: "roleTemplate", foreach: Roles }'></ul>      
</script>

<script type='text/html' id='roleTemplate'>
  <li>
    <input type='radio' data-bind='value: Id, 
      checked: $parent.SelectedRoleId(), 
      attr: { name: "roleFor" + $parent.Id(), id: "roleFor" + $parent.Id() + "_" + Id() }' />
    <label data-bind='text: Name, 
      attr: { for: "roleFor" + $parent.Id() + "_" + Id() }'></label>
  </li>        
</script>  

<script type='text/javascript' language='javascript'>

  var data = {
    'Applications': [
      { 'Id': 8, 'Name': 'Weather Predictor', 'SelectedRoleId': 1, 'Roles': [
          { 'Id': 1, 'Name': 'Meteorologist' },
          { 'Id': 2, 'Name': 'Farmer' },
          { 'Id': 3, 'Name': 'Pair of Dice' }               
        ]
      },
      { 'Id': 9, 'Name': 'Daily Crime Report', 'SelectedRoleId': 6, 'Roles': [
          { 'Id': 4, 'Name': 'Superhero' },
          { 'Id': 5, 'Name': 'Commissioner' },
          { 'Id': 6, 'Name': 'Journalist' }
        ]
      }
    ]       
  };

  var viewModel = ko.mapping.fromJS(data);

  ko.applyBindings(viewModel);

</script>

最初はすべてが正常にレンダリングされます。

  • 天気予報
    • [X]気象学者
    • []農夫
    • [ ] サイコロのペア
  • 毎日の犯罪レポート
    • [ ] スーパーヒーロー
    • []コミッショナー
    • [X]ジャーナリスト

しかし、「Farmer」をクリックすると、「WeatherPredictor」の下のすべての役割がチェックされていないように見えます。

  • 天気予報
    • []気象学者
    • []農夫
    • [ ] サイコロのペア
  • 毎日の犯罪レポート
    • [ ] スーパーヒーロー
    • []コミッショナー
    • [X]ジャーナリスト

もう一度「ファーマー」をクリックすると、ラジオボタンがチェックされるだけでなく、それ以降は正常に機能します。バギーとして機能するのは最初のクリックだけです。「PairofDice」やその他のチェックされていないラジオボタンをクリックしても、同じ問題が発生します。

この問題はしばらくの間私を困惑させてきました、そして私はここでノックアウトを不適切に使用しているのではないかと思い始めています。

この問題についての洞察をいただければ幸いです。

4

2 に答える 2

2

バインディングを使用している場合は、不要なイベントハンドラーがアタッチされるcheckedため、バインディングの使用は避けてください。value

簡単なオプションは、バインディングにを追加しvalue（つまりattr、イベントハンドラーを追加せずに、value属性を設定するだけです）、その後にcheckedバインディングを配置します（つまり、実行value前に既に設定されています）。checked

data-bind='attr: { value: Id, name: "roleFor" + $parent.Id(), id: "roleFor" + $parent.Id() + "_" + Id() }, checked: $parent.SelectedRoleId'

サンプル： http： //jsfiddle.net/rniemeyer/Y478G/

于 2012-05-31T00:57:55.780 に答える
0

交換

value: Id, checked: $parent.SelectedRoleId()

と

value: Id(), checked: $parent.SelectedRoleId

サンプル： http： //jsfiddle.net/nickolsky/zrBuL/10/

于 2012-05-31T00:49:49.907 に答える