Knockout Binding Messes up Radio Button Formatting - html

Question

As a prototype, I hard coded a radio button list, just to work out the CSS, etc. When I converted it to be generated from a JSON list using Knockout, however, the formatting went crazy. Here is the original 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 />
Here is the Knockout version. It gets the data from the ajax call correctly (3 items with the correct text):
<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>
What's going on here?
Thanks,
Jay

Answer 1

This looks fine. You might want to inspect your HTML elements in your debugger. Also, if you're using some kind of toolkit to style things, that would be a problem.
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>

Answer 2

The problem is that I added a second span to do the Knockout binding of the Name field. I assumed I needed to use an HTML element to bind to. Turns out you don't need to bind to an HTML element in Knockout. You can use "containerless syntax."
So, I replaced my second <span> with this, and that fixed it:
<!--ko text:Name--><!--/ko-->