Handlebars.jsが空白のマークを返します

Question

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.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> 

問題は、2番目のテンプレート（modalDishInfoが）にconsole.log戻っ 'マークアップ' 変数が完全に空、レンダリングしたくないです。私はブロックヘルパーと表現のさまざまな組み合わせを試みましたが、それらのどれも働いていませんでした。多分何か重要なことが見当たりませんか？または単一のオブジェクトをテンプレートに渡すときに特定の式を使用する必要がありますか？

Answer 1

私は間違いを見つけました。私のテンプレートIDとコンテナID（空です）は同じです。だからjqueryセレクタが空のマークアップを返しました。 TWIGと私のスクリプトを使っている私がTWIGエラーを避けるために{％verbatim％}タグに入っていたので、私はそれに気付かなかったので、コードに重複したIDを使ってエラーや警告を受け取ることはありません。私の答えは有益で、誰かに役立つことができると願っています。