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!
Add a comment
|
1 Answer
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.
3 Comments
WriteEatSleepRepeat
Thanks. I also think there are some problems with the way knockout interacts with jquery mobile but I just don't see how to fix it.
WriteEatSleepRepeat
do you see a work around? I just want to use the MVVM with knockout to show a tree hierarchy with listviews. Maybe I can use something else instead of the nested list mechanism of jQuery mobile. maybe just listviews and have the pages showing child listviews separated or generated on the fly, not sure
John Earles
Take a look at my last fiddle. You can drill into Item 1, and then into Item 1.2 to see three levels of hierarchy. Since I use a template there is theorhetically no limit to the levels you can render.