How to style jQuery Mobile content in a Knockout template?

I am using KnockoutJS wi开发者_运维技巧th jQuery Mobile. However, it doesn't seem to style any of the content within the template regardless of their data-role. I am assuming it is because it loads it as an ajax call and that will be after jQuery Mobile has done its initial styling.

Some of my templates are pretty input heavy so I have read that you can go through each element and tell jQuery to style them as their relevant type, but surely there must be a way to get it to just redo everything, or a page?

Depending on how soon you need this working, I wouldn't count on form.refresh() coming anytime soon. From the jQuery Mobile Blog

We’re working on some exciting additions to the library including broader transition support, pushState and more. For the near term, we’re going to target the Beta 2 release within the next 2 weeks to get these click changes and other improvements into the stable release so the pace of releases will start being much more frequent.

While it's possible form.refresh() is coming with beta 2, that's at least two weeks away. Until then, your best option is to go through each element and call the style method. You can get a list of element styles here: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/plugin-eventsmethods.html Simply call them without arguments to force jQuery mobile styling. Example: $("input[type='number']").textinput();

Another method that will work (but should probably just be used as a last resort) is simply coding the html of your template so that the elements are already styled as jQuery mobile elements. In other words, all that html that jQuery mobile adds, such as <span class="ui-btn-inner"><span class="ui-btn-text">, put it in yourself. Of course, this means your templates end up with a bunch of extra html and could get confusing to work with, so only do this if you have to.

I am going to accept the previous answer, as the problem I mentioned would be solved by that.

HOWEVER! the issue I was actually experiencing was because I had a reference to Qtip within my javascript includes, and for some reason that was causing the added elements to not get injected correctly. I.e my footer navbars were not receiving the spans injected into the anchors etc.

As soon as I removed it, everything worked.