CODEWITHSUNDEEP
jqueryjquery-mobilehandlebars.js
Dustin Kofoed
Dustin Kofoed

Reputation: 549

Why is Handlebarsjs template missing jquery mobile CSS styles?

I'm using Handlebarsjs inside a jquery mobile page and when I get the data posted back from the server, it gets inserted into the template ... but none of the jquery mobile CSS styles are applied to the code inside the template.

My template looks like this:

            <script id="card_list_template" type="text/x-handlebars-template">
            {{#each this}}
            <li>
                <a href="#">
                    <img src="{{path}}" />
                    <h3>{{first_name}}&nbsp;{{last_name}}</h3>
                    <p>Card Owner:&nbsp;{{user_id}}</p>
                </a>
            </li>
            {{/each}}
        </script>

The above code block is inserted into this unordered list:

<ul id="search_results" data-role="listview" data-theme="a">

The data-role="listview" is supposed to apply a certain style to the list items, but it's not working for the items generated through the template.

Upvotes: 2

Views: 1499

Answers (2)

humkins
humkins

Reputation: 10667

.trigger('create')

didn't help me with unordered list. But

$('ul').listview('refresh');

did.

Upvotes: 0

rickdmer
rickdmer

Reputation: 1147

If you call .trigger('create') on the element it should apply the styles.

Example:

var template = Handlebars.compile(source);
var html = template(output);
$('#handlebarsData').html(html);
// Applies jQuery Mobile styles
$('#handlebarsData').trigger('create');

Upvotes: 9

Related Questions