如何在Handlebars模板sadrzaj-template中使用变量ime

我看了你的代码，问题出在你没有把输入框获取的ime变量传递给Handlebars模板的上下文，而且在#each循环里访问外部变量的路径也需要调整。咱们一步步来解决：

1. 修正模板的类型拼写错误 #

首先你的模板script标签的type属性写错了，把text/x-hanldebars-template改成text/x-handlebars-template，不然Handlebars可能无法正确识别模板。

2. 将ime传入模板上下文 #

你的createHTML函数目前只把书籍数据传给了模板，但ime是外部变量，需要把它和书籍数据一起包装成一个对象，作为模板的上下文：

function createHTML(knjigeData, imeValue) {
  var knjigeTemplate = document.querySelector("#sadrzaj-template").innerHTML;
  var compiledTemplate = Handlebars.compile(knjigeTemplate);
  // 把书籍数据和ime变量一起传入模板
  var templateContext = {
    knjige: knjigeData,
    ime: imeValue
  };
  var ourGeneratedHTML = compiledTemplate(templateContext);
  var knjigeContainer = document.querySelector("#sadrzaj");
  knjigeContainer.innerHTML = ourGeneratedHTML;
};

然后调用这个函数的时候，把ime.value传进去：

// 在onload回调里修改调用
createHTML(data, ime.value);

3. 在模板中正确访问ime变量 #

因为你在{{#each knjige}}循环里，当前上下文是每一本knjige对象，所以要访问上层上下文的ime，需要用../ime来向上一级查找：

<script id="sadrzaj-template" type="text/x-handlebars-template">
  {{#each knjige}}
    {{#equal autor ../ime}}
      <h2>{{naslov}}</h2>
      <img src="{{slika}}">
      <h4>{{brojstrana}} strana</h4>
      <h3>Autor: {{autor}}</h3>
      <h3>cena: {{cena}}</h3>
    {{/equal}}
  {{/each}}
</script>

修改后的完整代码片段 #

这里是整合了所有修改后的关键部分：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>2 kolokvijum</title>
</head>
<body>
  Ime autora: <input id="imeAutora" type="text" value="..."><br><br>
  <button id="btnAutor" type="submit" onClick="autorIme()">Prikazi</button><br><br>
  <script src="handlebars-v4.0.11.js"></script>
  <!-- 修正了type属性的拼写 -->
  <script id="sadrzaj-template" type="text/x-handlebars-template">
    {{#each knjige}}
      {{#equal autor ../ime}}
        <h2>{{naslov}}</h2>
        <img src="{{slika}}">
        <h4>{{brojstrana}} strana</h4>
        <h3>Autor: {{autor}}</h3>
        <h3>cena: {{cena}}</h3>
      {{/equal}}
    {{/each}}
  </script>
  <div id="sadrzaj"></div>
  <script>
    function autorIme() {
      var ime = document.querySelector("#imeAutora");
      console.log(ime.value);
      var ourRequest = new XMLHttpRequest();
      ourRequest.open('GET', 'json.json');
      ourRequest.onload = function() {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
          var data = JSON.parse(ourRequest.responseText);
          // 传入ime.value到createHTML
          createHTML(data, ime.value);
        } else {
          console.log("We connected to the server, but it returned an error.");
        }
      };
      ourRequest.onerror = function() {
        console.log("Connection error");
      };
      ourRequest.send();
      
      // 修改createHTML函数，接收ime参数
      function createHTML(knjigeData, imeValue) {
        var knjigeTemplate = document.querySelector("#sadrzaj-template").innerHTML;
        var compiledTemplate = Handlebars.compile(knjigeTemplate);
        var templateContext = {
          knjige: knjigeData,
          ime: imeValue
        };
        var ourGeneratedHTML = compiledTemplate(templateContext);
        var knjigeContainer = document.querySelector("#sadrzaj");
        knjigeContainer.innerHTML = ourGeneratedHTML;
      };
    };
  </script>
  <script>
    Handlebars.registerHelper('equal', function(lvalue, rvalue, options) {
      if (arguments.length < 3) throw new Error("Handlebars Helper equal needs 2 parameters");
      if (lvalue != rvalue) {
        return options.inverse(this);
      } else {
        return options.fn(this);
      }
    });
  </script>
</body>
</html>

这样修改后，模板就能正确使用输入的ime变量来过滤作者匹配的书籍了。

内容的提问来源于stack exchange，提问作者Sasa Ilic