使用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');

  

<强> Demo

Answer 2

使用Knockout，你需要从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对第一个/最后一个圆形课程提示的帮助！