Question

我正在搞乱Handlebars.js，我正在做一个非常简单的例子，包括来自网站的教程（鞋子部分）和我自己的简单小模板（标题，问题所在）

handlebardemo.html

<head>
    <meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
    <title>Handlebar demo</title>

    <script src="lib/jquery-2.1.4.js" type="text/javascript"></script>
    <script src="lib/jquery-ui.js" type="text/javascript"></script>
    <script src="lib/handlebars-v4.0.4.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/w3.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
</head> 
<body>
<div class="username-container">
    <script id="heading-template" type="x-handlebars-template">
        <h1 class="h1">Hello {{username}}</h1>
    </script>
    <input type="text" id="username">
    <button type="submit" id="username-submit">Enter</button>
</div>

<h4 class="w3-row-padding">Shoe List:</h4>
<ul class="shoesNav w3-ul w3-text-indigo"></ul>
<script id="shoe-template" type="x-handlebars-template">
    {{#each this}}
        <li class="shoes"><a href="/{{name}}">{{name}}--Price:{{price}} </a></li>
    {{/each}}
</script>
</body>

main.js

$("#username-submit").click(function(){
    var uNameVal = $("#username").val();
    var uName = {"username":uNameVal};

    var theTemplateScript = $("#heading-template").html();
    var theTemplate = Handlebars.compile(theTemplateScript);
    $(".username-container").append(theTemplate(uName));
});

$(function (){
    var shoesData=[{name:"Nike", price:199.00}, {name:"Loafers", price:59.00}, {name:"Wing Tip", price:259.00}];

    //Get html from tempalte in script tag
    var theTemplateScript = $("#shoe-template").html();

    //Compile the template
    var theTemplate = Handlebars.compile(theTemplateScript);
    $(".shoesNav").append(theTemplate(shoesData));
    //shoesData is passed to compiled handlebars function
    //function inserts values from the objects in their respective places in the HTML
    //and returned HTML: as a string. Then jQuery is used to append the resulting HTML string to the page
})

我不确定我是否正确使用了handlbars语法等，但我主要基于main.js中的第二个函数，它来自一个简短的把手教程

单击Enter按钮时，没有任何反应。没有控制台错误，它什么也没做。我是否采用了错误的方式，至少与无序列表示例相比？

编辑：根据Elli Parks的回答，我在提交按钮中添加了一个id，并将点击处理程序分配更改为提交按钮而不是文本框（我这是一个愚蠢的错误）。单击提交按钮时，元素仍然不会出现

Answer 1

在 main.js 中，您将点击处理程序附加到$.ajax({ type: "POST", data: {'location': location, 'search': search, 'referrer': referrer }, url: "Here the path to your php-file", success: function (data) { Here you could react on any } });，这是一个输入字段。您需要为Enter按钮指定一个id（例如：#username）并将点击处理程序附加到按钮。

这样的事情：

<强> handlebardemo.html

#username-submit

<强> main.js

<button type="submit" value="Enter" id="username-submit" >Enter</button>

Answer 2

你需要改变两件事：

修正选择器以定位按钮，就像@ElliPark已经说过
将整个内容放入文档就绪处理程序（即进入$(function () {...} );构造中。您正在尝试在DOM准备好之前附加事件侦听器。

请参阅demo on JSBin。

Handlebarsjs：单击提交按钮时不会显示H1标签

2 个答案: