jquery-ui - knockout.js 和 jQueryUI 创建 Accordion 菜单

Question

尝试让 jquery UI 和 knockout js 合作时遇到了一个小问题。基本上我想创建一个 Accordion ，其中包含通过 foreach(或模板)从 knockout 中添加的项目。

基本代码如下:

<div id="accordion">
    <div data-bind="foreach: items">
        <h3><a href="#" data-bind="text: text"></a></h3>
        <div><a class="linkField" href="#" data-bind="text: link"></a></div>
    </div>
</div>

这里没有什么令人印象深刻的......问题是，如果我这样做:

$('#accordion').accordion();

将创建 Accordion ，但内部 div 将是标题选择器(默认情况下是第一个 child )，因此效果不是想要的。

用这个修复东西:

$('#accordion').accordion({ header: 'h3' });

似乎工作得更好，但实际上创建了 2 个 Accordion ，而不是一个有 2 个部分的 Accordion ……很奇怪。

我试图探索 knockout 模板并使用“afterRender”重新 Accordion 化 div 但无济于事......它似乎只将第一个链接重新呈现为 Accordion ，而不是第二个。无论如何，这可能是由于我对 jquery UI 的初学者知识。

你知道如何让所有的东西一起工作吗？

Answer 1

我会为此类功能使用自定义绑定(bind)。

就像 RP Niemeyer以 jQuery Accordion 绑定(bind)到 knockoutjs http://jsfiddle.net/rniemeyer/MfegM/ 的示例