3

我正在尝试将 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 中测试过这个。

更新

搜索一下，我发现了一些旧信息，这些信息建议将其应用于.checkboxradio()元素以手动设置样式。我在这里做了

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

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

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

4

1 回答 1

1

好的。想我已经修好了。看这里

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

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

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

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

除非有人有更好、更清洁的方法来处理这个问题，否则我会结束这个问题。

于 2012-11-30T17:50:45.880 回答