淘汰赛绑定搞乱了单选按钮格式答案

【问题标题】：Knockout Binding Messes up Radio Button Formatting淘汰赛绑定搞乱了单选按钮格式
【发布时间】：2016-05-10 14:45:51
【问题描述】：

作为原型，我硬编码了一个单选按钮列表，只是为了计算出 CSS 等。但是，当我使用 Knockout 将其转换为从 JSON 列表生成时，格式变得疯狂。这是原始的 HTML：

<input id="pcp1" type="radio" name="pcp" /><label for="pcp1"><span></span>One</label><br />
<input id="pcp2" type="radio" name="pcp" /><label for="pcp2"><span></span>Two</label><br />
<input id="pcp3" type="radio" name="pcp" /><label for="pcp3"><span></span>Three</label><br />

这里是淘汰赛版本。它正确地从 ajax 调用中获取数据（3 项具有正确的文本）：

<div data-bind="foreach: PrimaryCareProviders">
<input data-bind="attr: { id: Id }" type="radio" name="pcp" /><label data-bind="attr: { for: Id }"><span></span><span data-bind="text:Name"></span></label><br/>
</div>

这是怎么回事？

谢谢，周杰伦

【问题讨论】：

标签： html css knockout.js

【解决方案1】：

这看起来不错。您可能希望在调试器中检查您的 HTML 元素。此外，如果您使用某种工具包来设置样式，那将是一个问题。

v = {
  PrimaryCareProviders: [{
    Id: 1, Name: 'One'
  }, {
    Id: 2, Name: 'Two'
  }, {
    Id: 3, Name: 'Three'
  }]
};

ko.applyBindings(v);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: PrimaryCareProviders">
  <input data-bind="attr: { id: Id }" type="radio" name="pcp" />
  <label data-bind="attr: { for: Id }">
    <span></span>
    <span data-bind="text:Name"></span>
  </label>
  <br/>
</div>

【讨论】：

【解决方案2】：

问题是我添加了第二个跨度来执行 Name 字段的 Knockout 绑定。我假设我需要使用一个 HTML 元素来绑定。事实证明，您不需要绑定到 Knockout 中的 HTML 元素。您可以使用“无容器语法”。

所以，我用这个替换了我的第二个 <span>，并且修复了它：

<!--ko text:Name--><!--/ko-->

【讨论】：