的代码：

Question

我需要在jsp页面中使用Handlebars。我在我的js文件夹中有把手-v1.3.0.js并使用以下代码片段将js文件包含到我的jsp页面中。

的代码：

<script type="text/javascript" src="./js/handlebars-v1.3.0.js"></script>

我也试过了<script type="text/javascript" src="js/handlebars-v1.3.0.js"></script>。但没有运气。

但是当页面加载时，我的浏览器控制台中出现“Hanldebars not defined”错误。请告诉我我做错了什么。如果我在html页面内使用把手，那么整个过程都有效。

文件夹结构如下所示。

-WebContent
  --Home.jsp

-js
  --handlebars-v1.3.0.js

我想知道两件事。 1.）在jsp文件中提供js文件路径的正确方法是什么？ 2.）jsp是否支持把手？

'components'是一个数组对象，在另一个js中定义。

我的源代码（Home.jsp）：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My first JSP</title>

<script type="text/javascript" src="./js/handlebars-v1.3.0.js"></script>

<script type="text/javascript">
    Handlebars.registerHelper('eachByIdx', function(menuData, options) {

            // My Logic 
    });

    var menuSource = document.getElementById("myTemplate").innerHTML;
    var menuTemplate = Handlebars.compile(menuSource);
    document.getElementById("div1").innerHTML = menuTemplate(menuData);
</script>

</head>

<body>
    <form action="Hello" method="post">
            <input type="text" value="ajith" />
        <script id="myTemplate" type="text/x-handlebars-template">
        <table>

       {{#eachByIdx components}}
                    // My Logic here              
       {{/eachByIdx}}

        <tr>
            <td>
             <a href="" onclick="return popup(this.form)">Add New</a>                   
     </td>
        </tr>           
        </table>       
       </script>
    </form>
</body>
</html>

Answer 1

不要使用相对路径从JSP文件中加载JS文件，因为JSP文件可以是：

基本上位于任何地方，
可以在其他地方使用（例如，包括在内）

相反，使用相对于Web内容根的绝对路径，理想情况下使用JSP URL-ish标记，以便自动提供上下文。

Answer 2

关于绝对路径，请尝试$ {pageContext.request.contextPath} /js/handlebars-v1.3.0.js
是的，请将您的脚本代码移到底部，您正在尝试使用getElementById，但页面未完成加载。

请参阅以下示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script   src="${pageContext.request.contextPath}/js/handlebars-v1.3.0.js"></script>
</head>

<body>
    <form action="Hello" method="post">
        <input type="text" value="ajith" />
      <div id="div1"></div>
    </form>

<script id="myTemplate" type="text/x-handlebars-template">
  <table>
      {{#eachByIdx components}}
                  // My Logic here
      {{/eachByIdx}}
      <tr>
          <td>
           <a href="" onclick="return popup(this.form)">Add New</a>
          </td>
      </tr>           
  </table>       
</script> 
<script type="text/javascript">
    Handlebars.registerHelper('eachByIdx', function(menuData, options) {
            //My Logic 
    });

    var menuSource = document.getElementById("myTemplate").innerHTML;
    var menuTemplate = Handlebars.compile(menuSource);
    document.getElementById("div1").innerHTML = menuTemplate(menuTemplate);
</script> 
</body>
</html>

JSP中的把手

的代码：

我的源代码（Home.jsp）：

2 个答案: