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

自定义Knockout绑定处理程序：

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页面时，“添加内联”项似乎很好，因为我可以折叠并展开它。但是，当我点击“添加项目”按钮时，会向手风琴添加一个新项目，但它根本没有样式。例如：

enter image description here

在上图中，第一个项目的样式正确，但其余项目没有应用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并将knockout的版本更改为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 knockoutjs：2.1.0

遇到jQueryUI手风琴和Knockoutjs问题

2 个答案: