Accordion binding and foreach binding

[trevorlloydelliott]

With knockout-2.3.0 I am unable to get the accordion binding to work on the same element as a foreach binding.

An exception is thrown from knockout-2.3.0.js:

"Multiple bindings (foreach and accordion) are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element."

[gvas]

Each of knockout-jqueryui's bindings want to control the descendant bindings, none of them will coexist with foreach on the same element. As a workaround, you can use the foreach binding on a virtual child of accordion's bound element: http://jsfiddle.net/2VCtD/1/

Regards, Gábor

[trevorlloydelliott]

Thanks for your input.

I tried that workaround, but the problem is it doesn't work when the foreach bound to an observable array in which the contents are lazy loaded. The accordion() function needs to be executed after all the child elements are populated.

I was able to wrap the accordion div with an outer div bound to a boolean flag that signals when the data I'm trying to turn into an accordion is finished loading like so:

<div data-bind="if: FinishedLoading">

But unfortunately I won't be able to refresh the contents of the list and add or remove accordion tabs on the fly.

[trevorlloydelliott]

Actually, I didn't see it in your example but the refreshOn option used in conjunction with the containerless foreach syntax seems to be what I need.

[gvas]

Yes, for the record here is the updated fiddle with the refreshOn option: http://jsfiddle.net/2VCtD/2/

The accordion widget's refresh() method doesn't refresh the panels before jQuery UI 1.10, so this technique doesn't work with older versions.

[gvas]

Closing this issue because the solution above fixes it.