jquery-mobile - 使用 jQuery Mobile 和 Knockout JS 更新水平链接列表

Question

我正在使用 jQuery mobile 和 Knockout JS（两者的最新版本）。

在淘汰赛更新 dom 后，我似乎无法设置水平列表的样式。

<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-role="controlgroup" data-type="horizontal"  data-mini="true" data-bind="foreach: Labels">

<a href="#" data-role="button" data-bind="text: Label"></a>

</div>
<h2>Static</h2>
<div id="staticControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
    <a href="#" data-role="button">3G</a>
 <a href="#" data-role="button">SD</a>
<a href="#" data-role="button">HD</a>
<a href="#" data-role="button">HD+</a>
/div>

“静态”看起来不错，但“动态”不是 jQuery mobile 设计的。我已经尝试了几种方法来尝试完成这项工作，但我遗漏了一些东西......在淘汰赛运行后，我这样做了：

$("#dynamicControlgroup").trigger("create")
$("#dynamicControlgroup").children('a').buttonMarkup({ inline: true,mini: true,corners: true, type: "horizontal"});

但这是它的样子：

想法？

Answer 1

添加新项目后，使用以下代码。

$('[data-role="controlgroup"]').controlgroup().trigger('create');

注意：创建全新controlgroup的不会动态增强角。但是，将新项目附加到现有controlgroup角落会得到增强。这个问题可以通过添加ui-first-child和ui-last-child类来解决。

$('[data-role="controlgroup"] a').first().addClass('ui-first-child');

$('[data-role="controlgroup"] a').last().addClass('ui-last-child');

演示

Answer 2

事实证明，您需要从 div 中删除控制组，这样您就不会得到“空包装器”。所以动态代码看起来像：

<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-type="horizontal"  data-mini="true"     data-bind="foreach: Labels">

<a href="#" data-role="button" data-bind="text: Label"></a>

</div>

然后在页面加载时，您可以调用

$('#dynamicControlgroup').controlgroup().trigger('create');
$('#dynamicControlgroup a').first().addClass('ui-first-child');
$('#dynamicControlgroup a').last().addClass('ui-last-child');

这有效。感谢 Omar 对第一轮/最后一轮课程提示的帮助！