为什么 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');

Answer 2

.trigger('create')

没有帮助我处理无序列表。但是

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

做了。