jquery - 数据绑定(bind)单选按钮没有样式

Question

我正在尝试将 KnockoutJS 与 jQuery Mobile 一起使用，但我遇到了一个问题，即数据绑定(bind)集中的单选按钮没有设置样式。

这是一个 fiddle

我有一个看起来像这样的简单模型:

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

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

然后我尝试像这样绑定(bind)它:

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

通过检查 DOM，我可以看到 KnockoutJS 已正确地将我的集合转换为(大致)这个(为清楚起见删除数据绑定(bind)):

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

如果我将其静态放入我的 HTML 中，它会被 jQuery Mobile 正确设置样式。

知道这里会发生什么吗？在同一个元素的其他地方，我有一个显示在 ListView 中的集合，并且样式很好。

到目前为止，我只在 FF 中测试过。

更新

四处搜索，我找到了一些 old information建议将 .checkboxradio() 应用于元素以手动设置它们的样式。我做到了here

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

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

这对一些人有帮助，但它们并没有像静态定义的按钮那样分组。每个都有单独的圆 Angular ，而不是仅圆化第一个元素的顶 Angular 和最后一个元素的底 Angular 。

Answer 1

好的。认为我已经修好了。参见 here

我在应用绑定(bind)后添加了这个:

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

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

boundFS 是我分配给父字段集的 id，.boundRadio 是应用于模板中所有单选按钮的类。

除非有人有更好、更简洁的方法来处理这个问题，否则我将关闭这个问题。