如何在 html 中使用车把

Question

我在车把中创建了一个自定义中断功能，并试图在 html 中使用它。在将 html 呈现给浏览器时，它没有显示预期的结果。如果标签放错了，请指正。

<html>
<head>
  <title>Hello World</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>

  <script id="handlebars-demo" type="text/x-handlebars-template">
     {{#break students}}
     {{name}} has passed in {{passingYear}}.<br>
  {{/break}}      
  </script>

</head>
<body>

{{name}} has passed in {{passingYear}}.<br>

<script>
Handlebars.registerHelper("break", function(data,options) {

  var context = {
  "students": [{
    "name": "mrinal",
    "passingYear": 2013
  }, {
    "name": "raman",
    "passingYear": 2016
  },    
    {
    "name": "John",
    "passingYear": 2018 
  }]
}

  var len = data.length;
  var returnData = "";

 // custom break function 
for (var i = 0; i < len; i++) {
    if(data[i].passingYear<2015){
      return  returnData = returnData + options.fn(data[i]);
      i=len+1;
    } else{
      return  returnData = returnData + options.fn(data[i]);
    }}
})
var template = $('handlebars-demo').html();
var templateScript = Handlebars.compile(template);

var html = templateScript(context);
$(document.body).append(html);
</script>


</body>
</html>

expected result: 
mrinal has passed in 2013.

请查看代码并分享是否需要进行任何更正。

Answer 1

很多错误：

您将车把助手的声明（即使您定义了附加到助手的函数也不起作用）与数据的编译和呈现混合在一起。把你的context和helper不需要的东西放出来
你没有声明 jquery 但你使用它 ($) 你必须包含 jquery
您调用 jquery 从您的模板中获取 html 但选择器不正确：如果您想要后面的 ID，则必须在选择器前面放置一个 # 字符尖锐的性格。

工作版本如下：

var context = {
  "students": [
    {
      "name": "mrinal",
      "passingYear": 2013
    }, 
    {
      "name": "raman",
      "passingYear": 2016
    },    
    {
      "name": "John",
      "passingYear": 2018 
    }
  ]
} 

Handlebars.registerHelper("break", function(data,options) {
  var len = data.length;
  var returnData = "";
 // custom break function 
  for (var i = 0; i < len; i++) {
      if(data[i].passingYear<2015){
        return  returnData = returnData + options.fn(data[i]);
        i=len+1;
      } else {
        return  returnData = returnData + options.fn(data[i]);
      }
  }
});

var template = $('#handlebars-demo').html();
var templateScript = Handlebars.compile(template);
var html = templateScript(context);
$("#placeholder").append(html);
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>

  <script id="handlebars-demo" type="text/x-handlebars-template">
  {{#break students}}
     {{name}} has passed in {{passingYear}}.<br>
  {{/break}}      
  
  {{name}} has passed in {{passingYear}}.<br>
  </script>

<div id="placeholder"></div>

expected result: 
mrinal has passed in 2013.

如何在 html 中使用车把

How to use handlebars in html

javascript

handlebars.js