0

我有两个单选按钮的动态水平控制组：

<div class="categories-panel" id="sections-panel">
    <fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
        <!-- ko foreach: Sections -->
        <input type="radio"
               data-mini="true" 
               ...
            />
        <label data-bind="text:Name, attr:{'for':Id}"></label>
        <!-- /ko -->
    </fieldset>
</div>

控制组的内容由 knockoutjs 更新。标记以这种方式更新：

self.refreshCategoriesList = function() {
    $("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
    $("#category-choice-fieldset").controlgroup();
};

问题是：在我打开并打开调试器中的 divdisplay: inline-block属性之前，控制组不能排成一行：.ui-controlgroup-controls

display: inline-block刷新 前：http: //i890.photobucket.com/albums/ac105/cubius/screen-1.png

刷新后display: inline-block（所需视图）：http: //i890.photobucket.com/albums/ac105/cubius/screen-2.jpg

如何让 jQM 总是在一行中绘制我的控制组？

4

2 回答 2

0

首先，您选择对照组的方式在这一行是错误的：

$("#category-choice-fieldset").controlgroup();

一定是

$("#section-choice-fieldset").controlgroup();

（可能是错字）您可以通过以下两种方式中的任何一种来做到这一点：

方法一

在我的小提琴中工作正常。我会说您将<script>标签从头移到正文，因为pagejQM 的事件不能与 KnockOut.js 很好地配合，而 KnockOut.js 需要准备好正常工作的 DOM，而 DOMready不能很好地与 jQM 配合使用。所以我猜它确实是一个恶性循环。

演示：http: //jsfiddle.net/hungerpain/k7UR5/

方法二

你可以在你的方法中再尝试一件事refreshCategoriesList：

//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");

刷新页面上的整个控件 - 就是trigger("create")这样

演示：http: //jsfiddle.net/hungerpain/k7UR5/1/

于 2013-06-22T07:02:54.797 回答
0

如果您要更新控制组（追加、修改等），请像这样访问控制组：

$("#my-controlgroup").controlgroup("container")["append"]($el);

您需要访问控制组container。请参阅我的 jsfiddle 以修改控制组：

http://jsfiddle.net/androdify/WAzs6/

于 2013-06-22T07:03:23.490 回答