如何在HTML中使用Handlebars

Question

如何在HTML中使用Handlebars

5

我在Handlebar中创建了一个自定义的断点函数并尝试在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.

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

- user11315212

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christophe · Answer 1

许多错误：

您混淆了handlebar helper的声明（即使您定义了附加到helper的函数，它也不是函数），并将其编译和呈现数据。将上下文和不需要在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.