数据绑定单选按钮未设置样式 [英] Data bound radio buttons not getting styled

问题描述

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

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.

这是小提琴

我有一个简单的模型，如下所示:

I have a simple model that looks like this:

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已将我的集合正确地(大致)转换为该集合(为清楚起见，删除了数据绑定):

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>

如果我将它们静态地放入HTML中，则它由jQuery Mobile正确设置了样式.

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.

到目前为止，我仅在FF中对此进行了测试.

I've only tested this in FF so far.

更新

对此进行搜索，我发现了一些旧信息将.checkboxradio()应用于元素以手动设置其样式.我在此处

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.

推荐答案

好.认为我已经解决了.请参见此处

Ok. Think I've fixed it. See here

我在应用绑定后添加了它:

I added this after applying the binding:

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

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

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

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.

这篇关于数据绑定单选按钮未设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！