为什么Handlebarsjs模板缺少jquery移动CSS样式？

Question

我在一个jquery移动页面中使用Handlebarsjs,当我从服务器发回数据时,它被插入到模板中......但是没有一个jquery移动CSS样式应用于模板内的代码.

我的模板看起来像这样:

            <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>

上面的代码块插入到这个无序列表中:

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

data-role ="listview"应该将某种样式应用于列表项,但它不适用于通过模板生成的项.

Answer 1

如果你调用.trigger('create')元素,它应该应用样式.

例:

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