Handlebars.js 返回空标记答案

【问题标题】：Handlebars.js returns empty markupHandlebars.js 返回空标记
【发布时间】：2016-06-22 11:51:13
【问题描述】：

我在渲染 handlebars.js 模板时遇到问题。我正在向服务器发出 AJAX 请求，服务器返回给我的数据包含带有对象的“菜肴”数组。菜肴对象包含 id、价格、重量、描述和照片数组。然后我用把手渲染它，它工作正常，'html'变量包含渲染标记。

    var data ;
    var modalDishInfo;
    var modalDishComments;
    var vitrina;

    function ajax(params){
        $.ajax({
            url: '/admin/getDishByCategory',
            type: 'POST',
            dataType: "json",
            data: params,
            success: function (result){
       data = JSON.parse(result);

       vitrina = Handlebars.compile( $('#vitrina_template').html() );
       modalDishInfo = Handlebars.compile( $('#modalDishInfo').html() );
       var html = vitrina(data.dishes);
       console.log(html);
       $('.foodmenucontent').empty();
       $('.foodmenucontent').append(vitrina(data.dishes));
}

<script id="vitrina_template" type="text/x-handlebars-template">
{{#each this}}
<div class="col-lg-3 mealcard" >

            <a href="#" id="#dish{{ id }}" onclick="openModal(id)"><p class="text-center mealname">{{ dish_name }}</p></a>
            <div class="weightandprice">
                <div class="weightcontainer"><span class="mealweight pull-right">{{ dish_weight }} грамм</span></div>
                <div class="pricecontainer"><span class="mealprice pull-left">{{ dish_price }} руб.</span></div>
            </div>
            <button class="orderbutton center-block">ЗАКАЗАТЬ</button>
        </div>
{{/each}}
</script>

如您所见，此代码渲染元素，其中包含带有 openModal() 函数的链接。我有空的引导模式窗口，并希望根据点击的链接渲染其内容。

function openModal(id){
        var foo = id.slice(-1);
        var modaldata = data.dishes;
        var modaldish = $.grep(modaldata, function (element) {
            return element.id == foo;
        });
        modaldish = modaldish[0];
        console.log(modaldish);
        var markup = modalDishInfo(modaldish);

        $('#modalDishInfo').empty();
        $('#modalDishInfo').append(markup);
        $('#modalDish').modal('show');
        $('.fotorama').fotorama();
    };

和模板

<script id="modalDishInfo" type="text/x-handlebars-template">
<div class="modalcontainer">
    <div class="row">
        <div class="col-lg-6">
            <div class="fotorama" data-nav="thumbs" data-width="100%" data-      thumbwidth="80" data-thumbheight="45"
                 data-transition="crossfade" data-loop="true" data-keyboard="true" data-navposition="bottom"
                  data-fit="cover" data-ratio="1600/900">
                {{#each dish_photos}}
                    <img src="/uploads/gallery/{{ this.path }}" class="img-responsive" alt="">
                {{/each}}
            </div>
        </div>
        <div class="col-lg-6">
            <p class="mealname">{{ dish_name}}</p>
            <pre>{{ dish_description }}</pre>
            <p>{{ dish_weight }}гр.</p>
            <p class="mealprice">{{ dish_price }}руб.</p><br>
            <button class="orderbutton ">ЗАКАЗАТЬ</button>

        </div>
    </div>

问题是第二个模板（modalDishInfo）不想渲染，console.log 返回“标记”变量完全为空。我尝试了块助手和表达式的不同组合，但它们都不起作用。也许我错过了一些重要的东西？或者在将单个对象传递给模板时需要使用特定的表达式？

【问题讨论】：

如果模板需要一个数组，则将其作为一个数组而不是单个对象发送。 handlebars #each 需要一个我相信的数组并且无法处理对象。
@ArathiSreekumar Vitrina_template（包含#each 块）渲染良好，因为我将数组传递给它。问题出在第二个模板中。我在其中传递了一个对象，但它不想渲染。
一个 jsfiddle 或 plunker 可能会有所帮助，我很困惑，哪些数据来自您的问题以及车把何时被编译。

标签： javascript ajax handlebars.js

【解决方案1】：

我发现我做错了。我的模板 ID 和容器 ID（为空）是相同的。所以 jquery 选择器返回给我空标记。我没有注意到，因为我使用 TWIG 并且我的脚本在 {% verbatim %} 标签中以避免 TWIG 错误，所以我没有收到任何错误或警告在代码中使用重复 ID。希望我的回答内容丰富，对某人有所帮助。

【讨论】：