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

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 中的第二个函数，它来自一个简短的 handlebars 教程

当我点击 Enter 按钮时，没有任何反应。没有控制台错误，它什么都不做。至少与无序列表示例相比，我是否以错误的方式处理此问题？

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

Answer 1

在 main.js 中，您将点击处理程序附加到 #username，这是一个输入字段。您需要为 Enter 按钮提供一个 ID（例如：#username-submit）并将点击处理程序附加到该按钮。

所以像这样：

handlebardemo.html

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

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

});

Answer 2

你需要改变两件事：

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

参见demo on JSBin。

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

Handlebarsjs : H1 tag won't display when submit button is clicked

html

javascript

jquery

template-engine

handlebars.js