5

我检查了许多样本，但没有一个与我正在尝试做的完全一样。

我所拥有的大部分都有效，但它并不完全正确。

这是一个小提琴来说明这个问题。

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

请注意，顶部集工作正常，但它是静态定义的。

底部集合（Tom、steve、bob）基本上“工作”，但标题元素最终出现在可折叠标题和隐藏的可折叠部分中。

好像我一定做错了什么，但我一直无法弄清楚是什么。

有任何想法吗？

4

2 回答 2

6

仅供参考和其他任何遇到此问题的人，事后看来至少有些明显。

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 都会尽职尽责地将最后一项标记为“最后一项”，但从不删除先前项上的标记。结果，如果您从一个空列表开始，每个项目最终都被标记为“最后一个”，并且样式因此而失败。

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

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

于 2012-07-04T01:37:40.123 回答
4

我实际上找到了一个更简单的方法来做到这一点：

  1. 像往常一样设置你的 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>

  2. 用 class="collapsible 把它包装在一个 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>

  3. 像这样进行绑定后，通过 jquery mobile 应用可折叠小部件：

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

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

于 2012-12-11T17:21:45.543 回答