Question

I am trying to make a simple nested list (jQuery Mobile) get filled by knockout.js
The data is a simple JSON hierachy.

Please check http://jsfiddle.net/RYLve/

The parent item is displayed but it is not navigable.
What’s wrong?

Thanks!

Answer 1

There are two main issues I think you are facing:

1) Make sure you use <span data-bind="text: Name"></span> rather than <span data-bind="text: Name" />

2) There are timing issues with the automatic processing of the listviews. You can resolve this by using a custom binding to add the data-role and process the element.

I’m not sure if it is perfect, and I still see funny binding errors, but this fiddle seems closer to what you are looking for: http://jsfiddle.net/RYLve/1/

Hopefully this will help you.

EDIT: I’ve enhanced my fiddle and I think everything is now working. I switched to using a template so you can get full heirarchies. Also note that I use setTimeout to allow the DOM time to populate before attempting to invoke listview.

http://jsfiddle.net/RYLve/2/