Question

我正在尝试将KnockoutJS与jQuery mobile一起使用，而且我遇到了数据绑定集中的单选按钮无法设置样式的问题。

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

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

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

我试着像这样绑定它：

<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已经正确地将我的集合转换为（大致）这个（为清晰起见，删除了数据绑定）：

<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就可以正确设置它。

知道这里可能会发生什么吗？在同一个项目的其他地方，我有一个在列表视图中显示的收集，并且样式很好。

到目前为止，我只在FF中对此进行过测试。

更新

搜索此内容，我发现有些old information建议将.checkboxradio()应用于元素以手动设置样式。我做了here

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

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

这有些帮助，但它们不像静态定义的按钮那样分组。每个都有单独的圆角，而不是仅围绕第一个项目的顶角和最后一个项目的底角。

Answer 1

确定。我想我已经修好了。见here

我在应用绑定后添加了这个：

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

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

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

除非某人有更好，更清洁的方法来解决这个问题，否则我会关闭这个问题。

数据绑定单选按钮未进行样式设置

1 个答案: