Handlebars.js에서 빈 마크 업을 반환합니다.

handlebars.js 템플릿을 렌더링하는 데 문제가 있습니다. 나는 서버에 AJAX 요청을하고, 서버는 객체들로 '접시'배열을 포함하는 데이터를 반환한다. 객체에는 ID, 가격, 무게, 설명 및 사진 배열이 포함된다. 그런 다음 핸들 바를 사용하여 렌더링하고 올바르게 작동합니다. 'html'변수는 렌더링 된 마크 업을 포함합니다. 이 코드를 볼 수 있듯이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 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

템플릿에 배열이 필요한 경우 단일 개체 대신 하나의 배열로 보내십시오. 핸들 바 #each는 내가 믿는 배열을 기대하며 객체를 처리하지 못합니다. –

@ArathiSreekumar Vitrina_template (#each 블록 포함)은 배열을 전달할 때 잘 렌더링됩니다. 문제는 두 번째 템플릿에 있습니다. 단일 객체를 전달하지만 렌더링하지 않으려합니다. –

jsfiddle 또는 plunker가 도움이 될 수 있습니다. 어떤 데이터가 어디에서 나오는 지, 핸들 바가 컴파일 될 때 혼란 스럽습니다. –

나는 실수를 발견했습니다. 내 템플릿 ID와 컨테이너 ID (비어 있음)는 같습니다. 그래서 jquery selector가 빈 마크 업을 리턴했다. TWIG와 스크립트를 사용하여 메신저가 TWIG 오류를 피하기 위해 {% verbatim %} 태그에 있었기 때문에 나는 그것을 알아 차리지 못했습니다. 그래서 어떤 오류나 경고를받습니다. 코드에서 중복 된 ID를 사용합니다. 희망은 내 대답은 유익하고 누군가에게 도움이 될 수 있습니다.

출처

2016-06-22 13:05:13

Handlebars.js에서 빈 마크 업을 반환합니다.

답변

관련 문제