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返回空標記

回答

相關問題