javascript - 如何在 html 中使用 Handlebars

我在 Handlebars 中创建了一个自定义中断功能，并尝试在 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.

如果需要进行任何更正，请查看代码并分享。

最佳答案

许多错误:

您已经将 Handlebars 助手的声明(即使您定义了附加到助手的函数也不是函数)与数据的编译和呈现混合在一起。把你的上下文和不需要的东西放在帮助器中。

你没有声明 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.

关于javascript - 如何在 html 中使用 Handlebars ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55528716/

javascript - 如何在 html 中使用 Handlebars

上一篇：NHibernate 命名查询参数编号 @p1 @p2 等

下一篇：javascript - 为什么正方形没有出现在此socket.io html文件中？