Why is Handlebarsjs template missing jquery mobile CSS styles?

Question

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.

possible duplicate of [jQuery Mobile does not apply styles after dynamically adding content](http://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content) — mu is too short, Jul 29 '12 at 09:06

score 9 · Answer 1 · edited Nov 12 '12 at 21:08

9

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');

edited Nov 12 '12 at 21:08

Baz

36,440
11
68
94

answered Nov 12 '12 at 20:52

rickdmer

1,147
12
12

score 0 · Answer 2 · answered Mar 28 '13 at 10:13

0

.trigger('create')

didn't help me with unordered list. But

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

did.

answered Mar 28 '13 at 10:13

humkins

9,635
11
57
75

Why is Handlebarsjs template missing jquery mobile CSS styles?

2 Answers2