jQueryUI 手风琴和 Knockoutjs 遇到问题

Question

我已经能够在此处复制该问题：http://jsfiddle.net/NE6dm/

我在应用程序中使用了以下 HTML：

<div data-bind="foreach: items, jqAccordion: { active: false, collapsible: true }">
        <h3>
            <a href="#" data-bind="text: title"></a>
        </h3>
        <div>    
            hello
        </div> 
</div>
<button title="Click to return to the complaints list." data-bind="click: addItem">Add Item</button>

这个想法是为一堆项目显示一个手风琴，这些项目将通过一个 Knockout 可观察数组动态添加/删除。

这是我使用的一些 JavaScript 代码：

// Tab.
var tab = function (questionSet) {
    this.id = questionSet.code;
    this.title = questionSet.description;
    this.questionSet = questionSet;
};

自定义敲除绑定处理程序：

ko.bindingHandlers.jqAccordion = {
        init: function (element, valueAccessor) {
            var options = valueAccessor();
            $(element).accordion(options);
            $(element).bind("valueChanged", function () {
                ko.bindingHandlers.jqAccordion.update(element, valueAccessor);
            });
        },
        update: function (element, valueAccessor) {
            var options = valueAccessor();
            $(element).accordion('destroy').accordion(options);
        }
    };

var NonSequentialViewModel = function () {
    var items = ko.observableArray();

    items.push(new tab({ id: 23, description : 'Added Inline' }));

    var addItem = function() {
        items.push(new tab({ id: 5, description: 'Added by a click' }));
    };

    return {
        addItem: addItem,
        items: items
    }
}

var nonsequentialViewModel = new NonSequentialViewModel();    

ko.applyBindings(nonsequentialViewModel);

现在的问题是——当我查看 HTML 页面时，“Added Inline”项看起来很好，因为我可以折叠和展开它。但是，当我单击“添加项目”按钮时，手风琴中添加了一个新项目，但它根本没有样式。例如：

在上图中，第一个项目的样式正确，但其余项目没有应用任何 jQuery UI 样式。基本上，任何动态添加的项目都没有应用任何手风琴样式。

我看过这个问题

knockout.js and jQueryUI to create an accordion menu

我已经尝试使用问题中包含的 jsFiddle，但我不明白为什么我的代码没有相同的结果。

我希望其他人以前经历过这种情况并可以提供帮助。

编辑：

我进一步研究了这个问题，发现问题是这样的——当我向 oservable 数组添加一个新项目时，自定义处理程序的 update 方法没有被执行。因此，手风琴的重绘永远不会发生。

我不明白为什么不应该调用 update。这真是让我头疼！ :)

编辑： 我已经能够在这里复制问题：http://jsfiddle.net/NE6dm/

Answer 1

您的 NonSequentialViewModel 构造函数不返回 items 数组。将return 声明更新为：

return {
    items: items,
    addItem: addItem
}

这是工作小提琴：http://jsfiddle.net/vyshniakov/MfegM/323/

Answer 2

老问题，但我相信我遇到了同样的问题。 我可能需要向 knockout.js 提交一个错误。我只是花了几个小时试图找出类似的问题。

简而言之...如果我加载您的 jsfiddle 并将淘汰赛的版本更改为 2.1.0，它似乎可以正常工作。 这个：

<script type="text/javascript" src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.debug.js"></script>

到这里：

<script type="text/javascript" src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>

（唯一的区别是版本 2.2.0 --> 2.1.0）

进一步...我最终确定了几个版本： jQuery：1.9.1 jquery-ui（组合）：1.9.2 淘汰赛：2.1.0