Javascript 模型中具有父/子关系的淘汰JS单选按钮问题

当使用Knockout将视图模型中的父/子关系表示为视图中的单选按钮选择时，我遇到了一个奇怪的问题

在下面的示例中，我有一个表示两个应用程序的视图模型。每个应用程序包含三个角色和一个选定的角色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>

风险值数据={
“应用程序”：[
{'Id'：8，'Name'：'Weather Predictor'，'SelectedRoleId'：1，'Roles'：[
{'Id'：1，'Name'：'气象学家'}，
{'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'：'commission'}，
{'Id'：6，'Name'：'newister'}
]
}
]       
};
var viewModel=ko.mapping.fromJS（数据）；
应用绑定（视图模型）；

一开始一切都很好：

• 天气预报器
  • [十] 气象学家
  • []农民
  • []一对骰子
• 每日罪案报告
  • []超级英雄
  • []专员
  • [十] 记者

但当我点击“农民”时，“天气预报器”下的所有角色都未选中：

• 天气预报器
  • []气象学家
  • []农民
  • []一对骰子
• 每日罪案报告
  • []超级英雄
  • []专员
  • [十] 记者

再次单击“Farmer”不仅会检查单选按钮，而且从那时起它将正常工作。这仅仅是第一次点击就表现得很糟糕。同样的问题也会发生，如果我点击“一对骰子”，或者任何其他未经检查的单选按钮

这个问题困扰了我一段时间，我开始怀疑我是否在这里不正确地使用了Knockout

对此问题的任何见解都将不胜感激

更换

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

与

---

示例：

当您使用

选中的

绑定时，您应该避免使用

值

绑定，因为它会附加不必要的事件处理程序

一个简单的选择是在

attr

绑定中添加

值（因此您只需设置value属性，而不添加事件处理程序），然后将
选中的
绑定放在它之后（因此
值在
选中的
运行之前已经设置好），如下所示：

示例：
对框架的精彩洞察。我不知道这些规则。非常感谢！我遇到了完全相同的“双选单选按钮”问题，我要花很长时间才能找出问题所在。RP Niemeyer-谢谢。解决了我的问题！
value: Id(), checked: $parent.SelectedRoleId

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