Javascript JSP中的把手_Javascript_Jsp_Handlebars.js

Javascript JSP中的把手

javascript jsp

Javascript JSP中的把手,javascript,jsp,handlebars.js,Javascript,Jsp,Handlebars.js,我需要在jsp页面中使用把手。我的js文件夹中有handlebar-v1.3.0.js，并使用以下代码片段将该js文件包含到我的jsp页面中代码：我想知道两件事。 1.）在jsp文件中给出js文件路径的正确方法是什么？ 2.）jsp支持把手吗 “components”是在另一个js中定义的数组对象我的源代码（Home.jsp）：我的第一个JSP 把手.注册表帮助器（'eachbydx'，功能（菜单数据，选项）{ //我的逻辑 }); var menuSource=document.ge

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

代码：我想知道两件事。 1.）在jsp文件中给出js文件路径的正确方法是什么？ 2.）jsp支持把手吗

“components”是在另一个js中定义的数组对象

我的源代码（Home.jsp）：


我的第一个JSP
把手.注册表帮助器（'eachbydx'，功能（菜单数据，选项）{
//我的逻辑
});
var menuSource=document.getElementById（“myTemplate”）.innerHTML；
var menuTemplate=handlebar.compile（menuSource）；
document.getElementById（“div1”）.innerHTML=menuTemplate（menuData）；
{{{eachByIdx组件}
//我的逻辑在这里
{{/eachbydx}}

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

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

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

关于绝对路径，请尝试${pageContext.request.contextPath}/js/handlebar-v1.3.0.js

是的，请将脚本代码移到底部，您正在尝试使用getElementById，但页面未完成加载请参见以下示例：


{{{eachByIdx组件}
//我的逻辑在这里
{{/eachbydx}}
把手.注册表帮助器（'eachbydx'，功能（菜单数据，选项）{
//我的逻辑
});
var menuSource=document.getElementById（“myTemplate”）.innerHTML；
var menuTemplate=handlebar.compile（menuSource）；
document.getElementById（“div1”）.innerHTML=menuTemplate（menuTemplate）；

@戴夫：我尝试了下面所示的绝对路径。但是没有运气。你能给我一个URL标签的示例代码吗。我对这个jsp和所有东西都是新手。

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

-WebContent
  --Home.jsp

-js
  --handlebars-v1.3.0.js

<%@ 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>

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