淘汰赛js jquery-mobile可折叠集不起作用

Posted 2023-05-09

【中文标题】淘汰赛js jquery-mobile可折叠集不起作用

【英文标题】：knockout js jquery-mobile collapsible-set doesn't work

【发布时间】：2014-03-20 15:07:21

【问题描述】：

嗨，我希望你能帮我解决这个让我陷入困境的问题！

我有一个像下面这样的可折叠集合结构：

    <div data-role="collapsible-set" data-bind="foreach: thisTemplateColumnList">
        <div data-role="collapsible">
            <h3 data-bind ="text: Name"></h3>
            <p>I'm the collapsible set content for section 1</p>
        </div>
    </div>

它正确显示标题（列名称），但可折叠部分不起作用，我看到

I'm the collapsible set content for section 1

为好吧，在折叠式展开之前我不应该看到。

我已成功尝试在静态布局中使用 jquery-mobile 可折叠，并且效果很好。为什么 foreach: 版本不起作用？

提前致谢。 史蒂夫

【问题讨论】：

jQuery-mobile 何时评估 DOM 以发挥其 UI 魔力。由于 KO 正在动态更新 UI，您可能需要让 jQuery-mobile 重新解析

那么如何让 jQuery-mobile 重新解析？

我没有使用过该插件，也无法在文档中找到任何内容，但查看源代码可能会有所帮助：第 5318 行 $.mobile.collapsible.prototype.enhanceWithin( e.目标 ）。给foreach添加一个afterRender选项，直接调用这个函数

【参考方案1】：

我也遇到过这个问题，通过将标记更改为使用脚本模板解决了这个问题。所以在你的情况下，将标记更改为：

<script type="text/html" id="template-column-list">
    <div data-role="collapsible">
        <h3 data-bind ="text: Name"></h3>
        <p>I'm the collapsible set content for section 1</p>
    </div>
</script>

<div data-role="collapsible-set" data-bind="template:  name: 'template-column-list', foreach: thisTemplateColumnList">

</div>

应用绑定后，您可能需要调用此代码：

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