Jquery ui 使用knockout.js和jQueryUI创建手风琴菜单

试图让jquery UI和击倒js协同工作时遇到了一个小问题。基本上，我想创建一个手风琴，通过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>

将创建手风琴，但内部div将是标题选择器（默认情况下为第一个子项），因此效果不是想要的效果

用这个解决问题：

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

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

我曾尝试探索击倒模板和使用“afterRender”重新手风琴的div，但没有用。。。它似乎只将第一个链接重新渲染为手风琴，而不是第二个链接。也许这是因为我对jQueryUI的初级了解

---

您知道如何使所有功能协同工作吗？

我会使用自定义绑定来实现这些功能

---

就像jQuery Accordion绑定到knockoutjs的示例一样，这里有什么原因不能将Accordion小部件应用到内部div吗？例如：

<div id="accordion" 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>

---

我曾尝试集成knockout和JQuery UI手风琴，后来又集成了Bootstrap可折叠手风琴。在这两种情况下都有效，但我发现我必须实现一些变通方法才能正确显示所有内容，特别是在通过敲除动态添加元素时。上面提到的小部件并不总是知道淘汰赛发生了什么，事情可能会变得一团糟（div高度计算错误等等）。尤其是使用jqueryaccordion，它倾向于按照自己认为合适的方式重写html，这可能是一件非常痛苦的事情

所以，我决定使用核心JQuery和Knockout制作自己的手风琴小部件。看看这个工作示例：

当然，使用不同的标记和css可以根据您的需要进行定制

好在它完全是数据驱动的，除了您决定使用的css之外，它不会对布局做出任何假设。您会注意到标记非常简单。这只是一个例子。它应该是定制的

标记：

<div data-bind="foreach:groups" id="menu">
    <div class="header" data-bind="text:name, accordion: openState, click: toggle">&nbsp;</div>
    <div class="items" data-bind="foreach:items">
        <div data-bind="text:name">&nbsp;</div>
    </div>
</div>

---

您可以尝试使用以下方法对其进行模板化，如下所示：

<div id="accordion" data-bind="myAccordion: { },template: { name: 'task-template', foreach: ¨Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }"></div>   

<script type="text/html" id="task-template">
    <div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group">
        <h3><b><span data-bind="text: TaskId"></span>: <input name="TaskName" data-bind="value: TaskName"/></b></h3>
         <p>
             <label for="Description" >Description:</label><textarea name="Description" data-bind="value: Description"></textarea>
          </p> 
     </div>
 </script>

---

我所做的是，因为我的数据是从AJAX加载的，并且我显示了一个“加载”微调器，所以我将手风琴连接到ajaxStop上，如下所示：

$(document).ajaxStart(function(){$("#cargando").dialog("open");}).ajaxStop(function(){$("#cargando").dialog("close");$("#acordion").accordion({heightStyle: "content"});});

---

工作得很好。

我尝试了公认的解决方案，结果成功了。因为我犯了以下错误，所以我不得不做一点改变

Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'

只需添加以下内容，就可以了

if(typeof $(element).data("ui-accordion") != "undefined"){
$(element).accordion("destroy").accordion(options);
}

---

有关详细信息，请参见

是的-这是一个严肃的手风琴。这很有趣，它回答了我的问题，尽管它似乎有点不成熟：/我可能需要更深入地研究自定义绑定才能完全理解。无论如何，谢谢你的链接！在我看来，自定义绑定对于理解敲除和使用使用敲除模板更新的AlfeG JSFIDLE以及敲除2.1至关重要。当我将foreach绑定和accordion绑定放在同一个元素上时，我从knockout.js中得到一个错误，称为

多个绑定（foreach和accordion）正在尝试控制同一元素的子代绑定。不能在同一个元素上同时使用这些绑定。

非常好。谢谢你。我稍微修改了一下，为我的用户提供了有用的键盘导航。（至少比大多数基于jQuery的菜单实现提供的键盘导航更有用！）感谢您的支持。最后我也用了它。如果有办法让它更通用一点，那就太棒了。也许我以后会玩玩它。

$(document).ajaxStart(function(){$("#cargando").dialog("open");}).ajaxStop(function(){$("#cargando").dialog("close");$("#acordion").accordion({heightStyle: "content"});});

Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'

if(typeof $(element).data("ui-accordion") != "undefined"){
$(element).accordion("destroy").accordion(options);
}