Handlebars.js返回空标记

我在渲染handlebars.js模板时遇到问题。我正在向服务器发送AJAX请求，并且服务器向我返回包含“盘”数组的objects数据.Dish对象包含ID，价格，重量，描述和照片数组。然后我用handlebars渲染它，并且它的工作正常，'html'变量containts呈现标记。Handlebars.js返回空标记

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.I有空引导模式窗口，想展现它的内容，根据点击的链接。

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

来源

2016-06-22 Dmitry Divin

如果模板需要数组，则将其作为一个数组而不是单个对象发送。 handlebars #each期望我相信一个数组并且无法处理一个对象。 –

@ArathiSreekumar Vitrina_template（包含#each块）呈现良好，因为我将数组传递给它。问题出现在第二个模板中。我传递一个对象，但它不想渲染。 –

jsfiddle或plunker可能会有所帮助，我很困惑，哪些数据会从您的问题以及何时编译好。 –

我发现错误，我did.My模板id和容器id（这是空的）是相同的。所以jquery选择器返回给我空标记。我没有注意到，因为即时通讯使用TWIG和我的脚本是在{％verbatim％}标记以避免TWIG错误，所以我没有收到任何错误或使用代码中的重复ID的警告。希望我的回答是信息丰富的，可以帮助某人。

来源

2016-06-22 13:05:13

Handlebars.js返回空标记

回答

相关问题