jquery - 为什么 Handlebarsjs 模板缺少 jquery mobile 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');