핸들 막대에 대한 컨텍스트가 전달되지 않습니다.

핸들 막대 템플릿을 사용하고 있습니다. 나는 이상한 문제를 우연히 발견했다. 다음 코드는 브라우저에서 사용할 때 컴파일 된 핸들 막대 템플릿에 컨텍스트를 전달하지 않지만 이상한 점은 jsfiddle에서 동일한 코드가 제대로 작동한다는 것입니다. 그 아래, 여기에 https://jsfiddle.net/5pnfrjwa/핸들 막대에 대한 컨텍스트가 전달되지 않습니다.

내가 콘솔에 소스를 표시

<!DOCTYPE html> 
<html> 

    <head> 
    <title>Page Title</title> 
    </head> 

    <body> 
    {{> navbar this }} 

    <div id="render_here"> 
     first 
    </div> 

    <div id="render_here_again"> 
     second 
    </div> 

    <script id="first-template" type="text/x-handlebars-template"> 
     <div> 
     <div> Inside first template</div> 
     <h4 style="color:green">title1 :{{title1}}</h4> 
     <h4 style="color:blue">body1 :{{body1}}</h4> 
     <h4 style="color:blue">context : {{context}}</h4> 
     </div> 
    </script> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script> 
    <script> 
     $(document).ready(function() { 

     var source = $("#first-template").html(); 
     var template = Handlebars.compile(source); 


     var context 
      // = "test 1" 
      = { 
      title1: "hello", 
      body1: "body1" 
      } 

     var el_html = template(context); 

     console.log("*** This is source     : " + source); 
     console.log("*** This is template    : " + template); 
     console.log("*** This is template(context)  : " + el_html) 
     console.log(" data is : " + context.title1) 

     // $(document.body).append(el_html); 
     // $("#render_here").html(el_html); 
     // $("#render_here_again").html(el_html); 
     // document.getElementById('render_here_again').innerHTML = template(context); 
     $("#render_here_again").html(el_html) 

     }); 

    </script> 
    </body> 

</html>

내 코드이며, 여기

*** This is source     : 
     <div> 
     <div> Inside first template</div> 
     <h4 style="color:green">title1 :</h4> 
     <h4 style="color:blue">body1 :</h4> 
     <h4 style="color:blue">context : </h4> 
     </div>

같은 경우는 jsfiddle에 표시되는 출력은 다음과 같습니다

*** This is source     : 
     <div> 
     <div> Inside first template</div> 
     <h4 style="color:green">title1 :{{title1}}</h4> 
     <h4 style="color:blue">body1 :{{body1}}</h4> 
     <h4 style="color:blue">context : {{context}}</h4> 
     </div>

소스에 변수 이름이 들어있는 것 같습니다. jsfiddle에서 이중 중괄호 안에 있지만 내 로케일 시스템에서는 나오지 않습니다. 왜 이것이 브라우저와 jsfiddle에서 다르게 동작하는지 어떤 생각. 크롬과 모질라에서 시도했지만 두 가지 모두 동일한 문제가 있습니다. 서버 측에서 nodejs와 expressjs를 사용하고 있습니다.

하나를 편집하십시오. 문제를 식별했을 수도 있지만 여전히 해결책을 찾고 있습니다. 이것은 express 4 서버에서이 페이지를 렌더링 할 때 발생합니다. 위의 코드로 간단한 html 파일을 열면 잘 동작합니다.

출처

2017-09-17 Conquistador

서버 측에서 렌더링되지 않도록 백 슬래시를 사용하여 중괄호를 벗어나도록하십시오.

<script id="first-template" type="text/x-handlebars-template"> 
    <div> 
    <div> Inside first template</div> 
    <h4 style="color:green">title1 :\{{title1}}</h4> 
    <h4 style="color:blue">body1 :\{{body1}}</h4> 
    <h4 style="color:blue">context : \{{context}}</h4> 
    </div> 
</script>

출처

2017-09-17 18:07:03

시도해 보았습니다. 고마워. 이스케이프 처리없이 사용 된 예제 중 일부가 정상적으로 작동하는 것을 보았습니다. 다른 방법이 있습니까? – Conquistador

많은 솔루션이 있습니다. [콧수염 템플릿]에 대한 주제를 살펴보십시오 (https://stackoverflow.com/questions/13944623/escape-double-braces-in-mustache-template-templating-a-template- in-n) : 예 registerHelper/tags 메소드 또는 서버 측의 문자 교체. –

서버에서이 코드를 미리 컴파일하고 런타임 중에 만 미리 컴파일 된 handlebarsjs 코드로 내용을 전달하면 궁금합니다. 오늘 저녁에 이것을 확인하고 알려 드리겠습니다. – Conquistador

핸들 막대에 대한 컨텍스트가 전달되지 않습니다.

답변

관련 문제