Question

我正在使用车把模板。我偶然发现了一个奇怪的问题。以下代码在浏览器上使用时没有将上下文传递给已编译的把手模板，但奇怪的是，相同的代码在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上表现不同。我尝试使用chrome和Mozilla，但两者都面临同样的问题。我在服务器端使用nodejs和expressjs。

编辑一个 我似乎已经确定了这个问题，但我仍在寻找解决方案。当我从express 4服务器渲染此页面时，会发生这种情况。如果我用上面的代码打开简单的html文件，它的工作正常。

Answer 1

尝试使用反斜杠从花括号中逃脱，以避免在服务器端渲染。

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

车把没有通过上下文

1 个答案: