Question

我已经检查了一些样本，但没有一个与我想要做的完全相同。

我的作品大部分都是有效的，但是效果并不好。

这是解释问题的小提琴。

http://jsfiddle.net/5yA6G/4/

请注意，top set工作正常，但它是静态定义的。

底部集合（Tom，steve，bob）基本上“工作”，但是标题元素在可折叠标题和可折叠部分中都会被隐藏。

似乎我必须做错事，但我无法弄清楚是什么。

有什么想法吗？

Answer 1

仅供参考，对于遇到此问题的其他人来说，事后证明至少有些明显。

Knockout内置的“匿名”模板在许多情况下都很有效，但是使用JQMobile，它可能有点古怪。

这是因为JQMobile会在页面加载时调整匿名模板的内容，就像它对所有其他内容一样。

然后，稍后，当您使用knockout的ApplyBindings函数时，knockout将添加适用的元素，就像它应该的那样。正如许多帖子和答案所暗示的那样，你必须通过类似的东西在新创建的元素上调用collapsible（）。

$("div[data-role='collapsible']").collapsible({refresh: true});

没问题。但是，如果JQM已经应用了格式化，那么匿名模板已经被JQM“渲染”了，所以通过调用collapsible再次渲染它会导致各种各样的时髦结果，包括双重标题，嵌套可折叠等等。

我的解决方案是使用Knockout的“命名模板”功能，只需将模板放到标记中，就像这样：

<script type="text/html" id="alarm-template">
    <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="false">
        <h3 data-bind="text:name"></h3>
        <p>The content here</p>
        <p data-bind="text: name"></p>
    </div>
</script>

这样做可以防止JQM在页面加载时“呈现”模板元素，因此在实际生成它们时它们将被正确呈现。

编辑：以上工作适用于不在折叠集中的可折叠物，但是，如果它们在一组中，我发现了元素的样式（特别是，角落四舍五入以表示属于一组）不能正常工作。

据我所知，有两个问题：

首先，只是触发“创建”并不会实际刷新集合中所有可折叠的样式。要做到这一点你必须做...

$("div[data-role='collapsible-set']").collapsibleset('refresh');

但是，这是一个更糟糕的问题。 JQM“标记”集合中的最后一项作为“最后一项”。然后，这个事实将用于确定如何在最后一个项目展开/折叠时设置样式。

由于Knockout实际上并没有重建整个集合（速度），因此每次调用refresh方法时，JQM都会尽职地将最后一项标记为“last”，但永远不会删除先前项目上的标记。因此，如果从空列表开始，每个项目最终都会被标记为“最后”，并且样式因此而失败。

我在问题报告中详细介绍了github上的修复方法。

https://github.com/jquery/jquery-mobile/issues/4645

Answer 2

我实际上找到了一种更简单的方法：

像往常一样设置你的foreach绑定看起来像这样

<div data-bind="foreach: promotions">

    <h3 data-bind="text: Title"></h3>
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
        <span data-bind="text: Description"></span>
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>

在div中包裹它，类=“可折叠，如此

<div data-role="collapsible-set" data-bind="foreach: promotions">

<div class="collapsible">
    <h3 data-bind="text: Title"></h3>
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
        <span data-bind="text: Description"></span>
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>

执行绑定后，通过jquery mobile应用可折叠小部件：

$(document).ready(function () {
    ko.mapping.fromJS(data, dataMappingOptions, PromotionViewModel.promotions);
    ko.applyBindings(PromotionViewModel);
    $('.collapsible').collapsible();
});

对于可折叠集合，可以应用相同的想法，只需在foreach div上设置class =“collapsible-set”即可。希望这有帮助

Knockout，JQMobile和生成可折叠集似乎不太合适

2 个答案: