html - knockout 绑定(bind)弄乱了单选按钮的格式

Question

作为原型(prototype)，我硬编码了一个单选按钮列表，只是为了计算出 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 />

这是 knockout 版本。它从 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>

这是怎么回事？

谢谢，周杰伦

Answer 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>