Knockout Binding打破了单选按钮格式

Question

作为一个原型，我硬编码了一个单选按钮列表，只是为了解决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元素。此外，如果您使用某种工具包来设计样式，那将是一个问题。

＆＃13;

＆＃13;

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

ko.applyBindings(v);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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