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

【问题标题】：Handlebarsjs : H1 tag won't display when submit button is clickedHandlebarsjs：单击提交按钮时不会显示 H1 标签
【发布时间】：2016-02-20 10:27:53
【问题描述】：

我正在搞乱 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
})

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

当我单击 Enter 按钮时，没有任何反应。没有控制台错误，它什么也不做。至少与无序列表示例相比，我是不是走错了路？

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

【问题讨论】：

标签： javascript jquery html handlebars.js template-engine

【解决方案1】：

你需要改变两件事：

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

请参阅demo on JSBin。

【讨论】：

【解决方案2】：

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

});

【讨论】：

好的，这是一个明显的错误，哈哈。我改变了这个，但它仍然不显示 H1 元素
$( document ).ready(function() {} 中是否有点击处理程序？
我不会，我试试这个
好的，这完全有效，谢谢。看起来我的 jQuery 是问题而不是 Handlebars
嗨，Elli，看来我们有一些重叠 :)