Question

这是我的代码，问题在于变量unosAutor。我需要检查两个字符串是否与helper相同，但是如何在模板文字中使用变量unosAutor。当我把“一些文字”而不是unosAutor时它起作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2 kolokvijum</title>
</head>
<body>
    Unesite ime autora: <input id="imeAutora" type="text" placeholder="Ime autora"><br><br>
    <button id="btnAutor" type="submit" onClick="proveraAutora()">Prikazi</button><br><br>
    <div id="sadrzaj"></div>

    <script src="js/handlebars-v4.0.11.js"></script>
    <script src="js/qwest.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        function proveraAutora(){
            var unosAutor = document.querySelector("#imeAutora").value;
            var knjigeTemplate = 
            `
                {{#each knjige}}
                {{#equal autor unosAutor}}
                    <h2>{{naslov}} {{autor}}</h2>
                    <img src="{{slika}}"></img>
                    <h4>Broj strana: {{brojstrana}}</h4>
                    <h4><b>Cena: </b>{{cena}}</h4>
                {{/equal}}
                {{/each}}
            `;

            var divSadrzaj = document.querySelector("#sadrzaj");

            qwest.get('data/json.json').then(function(xhr, response){
                var Render = Handlebars.compile(knjigeTemplate);
                divSadrzaj.innerHTML = Render({knjige : response});
            });

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

Answer 1

使用normal syntax ${unosAutor}

如果您在手柄栏中使用平等帮手，则可能必须包含引号。 "${unosAutor}"，以便您将结果显示为{{#equal autor "AutorX"}}

var unosAutor = 'AutorX'
var knjigeTemplate =
  `
                {{#each knjige}}
                {{#equal autor "${unosAutor}"}}
                    <h2>{{naslov}} {{autor}}</h2>
                    <img src="{{slika}}"></img>
                    <h4>Broj strana: {{brojstrana}}</h4>
                    <h4><b>Cena: </b>{{cena}}</h4>
                {{/equal}}
                {{/each}}
            `;
console.log(knjigeTemplate)

Answer 2

要在模板文字中使用变量，请使用${yourVariable}，如下所示：

var variable = "some text";

console.log(`The value of variable is: ${variable}`);

在你的情况下：

var unosAutor = 'some text'
var knjigeTemplate =
  `
                {{#each knjige}}
                {{#equal autor ${unosAutor}}}
                    <h2>{{naslov}} {{autor}}</h2>
                    <img src="{{slika}}"></img>
                    <h4>Broj strana: {{brojstrana}}</h4>
                    <h4><b>Cena: </b>{{cena}}</h4>
                {{/equal}}
                {{/each}}
            `;
console.log(knjigeTemplate)

我如何在模板文字中使用变量？

2 个答案: