Question

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

    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返回＆＃39;标记＆＃39;变量完全空了。我尝试了块助手和表达式的不同组合，但它们都没有工作。也许我错过了重要的事情？或者在将单个对象传递给模板时需要使用特定的表达式？

Answer 1

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

Handlebars.js返回空标记

1 个答案: