Knockout.js 和 jQueryUI 来创建一个手风琴菜单 [英] knockout.js and jQueryUI to create an accordion menu

问题描述

试图让 jquery UI 和淘汰赛 js 合作时遇到了一个小问题.基本上我想创建一个手风琴，其中的项目是通过 foreach(或模板)从淘汰赛中添加的.

基本代码如下:

<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>

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

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

将创建手风琴，但内部 div 将是标题选择器(默认为第一个孩子)，因此效果不是想要的.

解决这个问题:

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

似乎效果更好，但实际上创建了 2 个手风琴而不是一个有 2 个部分的手风琴......很奇怪.

我尝试探索淘汰模板并使用afterRender"来重新对 div 进行手风琴化，但无济于事……似乎只将第一个链接重新渲染为手风琴而不是第二个.这可能是由于我对 jquery UI 的初学者知识.

你知道如何让所有东西协同工作吗?

解决方案

我会使用自定义绑定来实现此类功能.

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

Got a slight problem trying to have jquery UI and knockout js to cohoperate. Basically I want to create an accordion with items being added from knockout through a foreach (or template).

The basic code is as follows:

<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>

Nothing impressive here... The problem is that if I do something like:

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

The accordion will be created but the inner div will be the header selector (first child, as default) so the effect is not the wanted one.

Fixing stuff with this:

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

Seems to work better but actually creates 2 accordions and not one with 2 sections... weird.

I have tried to explore knockout templates and using "afterRender" to re-accordionise the div but to no avail... it seems to re-render only the first link as an accordion and not the second. Probably this is due to my beginner knowldge of jquery UI anyway.

Do you have any idea how to make everything work together?

解决方案

I would go with custom bindings for such functionality.

Just like RP Niemeyer with an example of jQuery Accordion binding to knockoutjs http://jsfiddle.net/rniemeyer/MfegM/

这篇关于Knockout.js 和 jQueryUI 来创建一个手风琴菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！