Question

我正在使用Handlebars和AJAX在每个AJAX响应上重新渲染模板。但是，没有任何事情发生，浏览器既不呈现模板也不显示任何错误消息。在很少的调试中，我发现javascript没有获取完整的hbs模板。

这是我的Handlebars模板：

<!--Template-->

<script id="careers-template" type="text/x-handlebars-template">
    <ul>
        {{#each careers_list}}
            <li class="mt-list-item">
                <div class="list-icon-container">
                    <button data-toggle="tooltip"
                            title="Add to Favorites"><i
                            class="fav-btn ion ion-ios-heart-outline font-red-intense"></i>
                    </button>
                </div>

                <div class="list-item-content">
                    <h3 class="uppercase">
                        {{this}}
                    </h3>
                </div>
            </li>
        {{/each}}
    </ul>
</script>

以下是source的控制台输出：

<ul> </ul>

这是我的AJAX电话：

$.ajax({
           url: '/dashboard/careers/get_careers_list',
           type: 'POST',
           contentType: 'application/json',
           data: JSON.stringify({category: category})
       }).done(function (data) {

           var container =  $("#career-detail-list");

           var source   = $("#careers-template").html();
           var template = Handlebars.compile(source);
           var list = template({careers_list: data});

           console.log(source);
           container.html(list);
       });

AJAX返回array of strings。

任何人都可以帮助为什么javascript没有抓住完整的hbs模板？

Answer 1

问题是careers_list是空的。

检查是this.careers_list而非careers_list

还要在引号中发送密钥

var list = template({'careers_list':data})

无法从Javascript中获取完整的Handlebars模板

1 个答案: