Question

我的问题是：如何在Handlebars模板（ime）中使用变量sadrzaj-template？

我的HTML代码：

<!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>
    <script id="sadrzaj-template" type="text/x-hanldebars-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);
                    createHTML(data);
                } else {
                    console.log("We connected to the server, but it returned an error.");
                }
            };
            ourRequest.onerror = function() {
                console.log("Connection error");
            };
            ourRequest.send();

            function createHTML(knjigeData) {
                var knjigeTemplate = document.querySelector("#sadrzaj-template").innerHTML;
                var compiledTemplate = Handlebars.compile(knjigeTemplate);
                var ourGeneratedHTML = compiledTemplate(knjigeData);

                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>

Answer 1

您需要将它作为参数（实际上是参数对象中的字段）传递给已编译的模板（实际上是一个函数）。在您的情况下，它是compiledTemplate()。由于您已经将knjigeData传递给它，只需将您的变量作为字段添加到data对象，最终变为knjigeData。

var data = JSON.parse(ourRequest.responseText);
data.ime = ime.value;
createHTML(data);

如果您想在模板中使用变量的直接值，现在可以像{{ime}}一样使用它。或者你可以像使用{{#equal autor ime}}

那样使用它

如何在Handlebars中使用变量？

1 个答案: