Question

I’m trying to use KnockoutJS with jQuery mobile and I’ve run into a problem where the radio buttons in a data-bound set don’t get styled.

Here’s a fiddle

I have a simple model that looks like this:

var vm = {
    options: ["option1","option2","option3"]            
}

$(function() {
    ko.applyBindings(vm);
});

And I try and bind it like this:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-bind="foreach: options">
        <input type="radio" name="selectModel" data-bind="attr: { id: $data}, value: $data" />
        <label data-bind="attr: {for: $data}, text: $data"></label>
    </fieldset>
</div>

I can see by examining the DOM that KnockoutJS has correctly transformed my collection to (roughly) this (removing the data-bind for clarity):

<fieldset data-role="controlgroup">
    <input id="option1" type="radio" name="selectStaticModel" value="option1">
    <label for="option1">option1</label>

    <input id="option2" type="radio" name="selectStaticModel" value="option2">
    <label for="option2">option2</label>

    <input id="option3" type="radio" name="selectStaticModel" value="option3">
    <label for="option3">option3</label>
</fieldset>

Which if I put in statically in my HTML, it is correctly styled by jQuery Mobile.

Any idea what might be going on here? Elsewhere in the same project I have a collect that is shown in a listview and that styles just fine.

I’ve only tested this in FF so far.

Update

Search around for this, I found some old information that suggested applying .checkboxradio() to the elements to manually style them. I did that here

$(function() {
    ko.applyBindings(vm);

    $(".boundRadio").checkboxradio();
});

This helps some, but they are not grouped like they would be for the statically defined buttons. Each one has individually rounded corners instead of only rounding the top corners of the first item and the bottom corners of the last item.

Answer 1

Ok. Think I’ve fixed it. See here

I added this after applying the binding:

$(function() {
    ko.applyBindings(vm);

    $(".boundRadio").checkboxradio();
    $("#boundFS").controlgroup();
});

Where boundFS is the id I assigned to the parent fieldset and .boundRadio is a class applied to all the radio buttons in my template.

Unless somebody has a better, cleaner way to handle this, I’ll close this question.