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

Question

我已经检查了一些样本,但没有一个与我正在尝试的完全相同.

我的作品大部分都是有效的,但它并不能正常工作.

这是解释问题的小提琴.

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

请注意,顶部集合工作正常,但它是静态定义的.

底部集合(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

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

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" 即可。希望这可以帮助