JSP的type="text/template"使用异常

解决Backbone与JSP模板冲突

http://www.zhihu.com/question/23695394
问题:
同样在学习backbone的时候,在JSP页面写模板(script template),浏览器报错提示title cannot be resolved to a variable(title是参数)

<script type="text/template" id="tpl">
    <ul>
        <li>Title:<%=title%>
        </li>
    </ul>
</script>
...
//backbone view中渲染模板
template: _.template($("#tpl").html()),
render: function(){
    this.$el.html(this.template(this.model.attributes));
}

原因及方法:
backbone中template默认的转义符是<%= %>,与jsp有语法冲突,需要另外定义转义字符

<script>
//将转义字符设为{{}},例如{{title}}
_.templateSettings = {
   interpolate : /\{\{(.+?)\}\}/g
};
</script>

...

<script type="text/template" id="tpl">
    <ul>
        <li>Title:{{title}}
        </li>
    </ul>
</script>
有网页的源码,怎么在idea里用vue复现,运用element-UI组件,view-source:https://rloopbase.nju.edu.cn/ ,源码如下: <html xmlns="http://www.w3.org/1999/xhtml " xml:lang="en" lang="en"> <link rel="stylesheet" type="text/css" href="/css/myIndex.css"> <head> <title>R-loopBase</title> <link rel="icon" href="/images/icon-rloop-purple-circle-2.png" type="image/x-icon"> </head> <body> <div class="container"> <div class="indexBar"></div> <div class="card"> <!-- Introduction --> <div class="cardTitle"> Introduction </div> <div class="cardContext"> <p id="introductionText" class="cardP">The R-loop, a three-stranded nucleic acid structure composed of an RNA:DNA hybrid and a displaced single-stranded DNA, plays versatile roles in many physiological and pathological processes. However, its controversial genomic localization and incomplete understanding of its regulatory network raise great challenges for R-loop research. Here, we present R-loopBase to tackle these pressing issues by systematic integration of a huge amount of genomics and literature data. A reference set of human R-loop zones is computed with confidence scores and detailed annotations (<span style="font-weight: bold"><a href="/index.jsp">Search</a></span>, <span style="font-weight: bold"><a href="/help.jsp">Help</a></span> and <span style="font-weight: bold"><a href="/download.jsp">Download</a></span>), all of which can be visualized in well-annotated genomic context in a local genome browser (<span style="font-weight: bold"><a href="https://rloopbase.nju.edu.cn/browser/cgi-bin/hgTracks ">Browser</a></span>). A list of 1,185 R-loop regulators is manually curated from PubMed literatures and annotated with most up-to-date multi-omics data (<span style="font-weight: bold"><a href="/rloopRegulator.jsp">Regulator</a></span></span>). We have also manually curated 24 R-loop regulators in mouse, 63 in yeast (<i>saccharomyces cerevisiae</i>) and 21 in <i>Escherichia coli</i> to facilicate R-loop research in these model organisms (<span style="font-weight: bold"><a href="/rloopRegulator.jsp">Regulator</a></span>). We further deduce the functional relationship between individual R-loops and their putative regulators (<span style="font-weight: bold"><a href="/rloopRegulator.jsp">Regulator</a></span> and <span style="font-weight: bold"><a href="/download.jsp">Download</a></span>). In total, we have generated billions of entries of functional annotations, which can be easily accessed in our user-friendly interfaces (<span style="font-weight: bold"><a href="/help.jsp">Help</a></span>). The regulator summary and genomic annotation of R-loop regions will be constantly updated along the research progress of field. You are welcome to contribute to updating R-loop regulators and related literatures (Regulator Updating System on <span style="font-weight: bold"><a href="/rloopRegulator.jsp">Regulator</a></span> page). Any suggestions and feedbacks from you are also welcome (<span style="font-weight: bold"><a href="/contact.jsp">Contact</a></span>). </p> </div> <a href="##"><div id="showIntroduction" onclick="showMoreOrLess()" style="text-decoration: underline; text-align: right; padding-right: 20px; margin-top: -15px;">Show more</div></a> <hr class="cardHr"> </div> <!-- Introduction --> <div class="searchContainer"> <div class="searchLogo"> <ul> <li class="searchLogoText">R-loopBase</li> <li class="searchLogoImg"><img src="/images/icon-rloop-purple-circle-2.png" style="height: 60px;"></li> </ul> </div> <div class="searchForm"> <input id="searchText" type="text" name="" placeholder="e.g. BRCA2 or chr1:154572702-154628593" onkeypress="handle(event)"> <a href="#"><div class="searchItem" href="#" onclick="toGeneList()"> <i>search</i> </div></a> </div> </div> <div class="horizontalMenu"> <!-- horizontal menu --> <ul id="indexNavigator"> <li> <a href="/browser/cgi-bin/hgTracks"> <img src="/images/browser.png"> <div>Browser</div> </a> </li> <li> <a href="/rloopRegulator.jsp"> <img src="/images/regulator.png"> <div>Regulator</div> </a> </li> <li> <a href="https://rloopbase.nju.edu.cn/deepr/tool/model "> <img src="/images/tool.png"> <div>Tool</div> </a> </li> <li> <a href="/download.jsp"> <img src="/images/download.png"> <div>Download</div> </a> </li> <li> <a href="/help.jsp"> <img src="/images/help.png"> <div>Help</div> </a> </li> <li> <a href="/contact.jsp"> <img src="/images/contact.png"> <div>Contact</div> </a> </li> </ul> </div> <!-- horizontal menu --> <div class="twoCardContainer"> <div class="card cardLeft"><!-- News --> <div class="cardTitle"> News </div> <div class="cardContext" id="newsDiv" style="overflow:hidden;clear:both;height:220px"> <ul> <li>2023.10.01 Online of <a href='https://rloopbase.nju.edu.cn/deepr/tool/model '>DeepER</a>, an R-loop prediction tool.</li> <li>2022.02.19 A new <a href="https://doi.org/10.1101/2022.02.18.480986 ">preprint</a> by R-loopBase team.</li> <li>2021.11.18 Published on <a href="https://doi.org/10.1093/nar/gkab1103 ">Nucleic Acids Res</a>.</li> <li>2021.06.20 Official release of R-loopBase v1.0.</li> <li>2021.06.15 Internal evaluation before public release.</li> <li>2021.05.10 Build-up of R-loopBase genome browser.</li> <li>2021.03.31 Data freeze for R-loopBase v1.0.</li> <li>2021.01.18 Launching R-loopBase project.</li> <li>2020.10.10 Systematic evalation of all R-loop mapping technologies.</li> </ul> </div> <a href="##"><div id="showNews" onclick="showMoreOrLess2()" style="text-decoration: underline; text-align: right; padding-right: 20px; margin-top: 4px;">Show more</div></a> <hr class="cardHr"> </div><!-- News --> <div class="card cardRight"> <!-- Publication --> <div class="cardTitle"> Latest Publications </div> <div class="cardContext" id="publicationDiv"> <ul> <li><a style="color: black" href="https://pubmed.ncbi.nlm.nih.gov/38590928/ ">LUC7L3 is a downstream factor of SRSF1 and prevents genomic instability.</a> Cell Insight. 2024.</li> <li><a style="color: black" href="https://pubmed.ncbi.nlm.nih.gov/38677845/ ">Smartphone-based device for rapid and single-step detection of piRNA-651 using anti-DNA:RNA hybrid antibody and enzymatic signal amplification.</a> Anal Chim Acta. 2024.</li> <li><a style="color: black" href="https://pubmed.ncbi.nlm.nih.gov/38609257/ ">Split activator of CRISPR/Cas12a for direct and sensitive detection of microRNA.</a> Anal Chim Acta. 2024.</li> </ul> <div style="width: 100%; text-align: right; margin-top: -4px;"><a href="https://pubmed.ncbi.nlm.nih.gov/?term=%28R-loop%29+OR+%28R-loops%29+OR+%28%22RNA+DNA+hybrid%22%29+OR+%28%22RNA+DNA+hybrids%22%29+OR+%28%22DNA+RNA+hybrid%22%29+OR+%28%22DNA+RNA+hybrids%22%29&sort=pubdate ">More publications in PubMed</a></div> </div> <hr class="cardHr"> </div> <!-- Publication --> </div> <div class="footer"> <div style="background-color: rgb(90,19,92); height: 60px; line-height: 60px; text-align: center; color: white; "> <div style="display: inline-block; height: 20px; line-height: 20px; margin-top: 15px; margin-bottom: 4px;">© 2020-2025 NANJING UNIVERSITY. ALL RIGHTS RESERVED. </div> <div style="height: 20px; line-height: 20px; margin-top: 0px;">CONDITIONS OF USE</div> </div> </div> </div> <!-- container --> </body> </html> <script type="text/javascript" language="JavaScript"> function handle(e){ if(e.keyCode === 13){ e.preventDefault(); // Ensure it is only this code that runs toGeneList(); } } function toGeneList(){ //var type = document.getElementById('searchSelect').value; var type; var value = document.getElementById('searchText').value; if(value==''){ alert("Please input keyword!"); }else if(value.match(/[^a-zA-Z0-9:-]/)){ alert("Only numbers, letters, \":\" and \"-\" are allowed!"); }else{ //top.location = '/geneList.jsp?searchFor=' + type + '&keyword=' + value; if(value.match(/^chr.+:\d+-\d+$/)){ type="location"; }else{ type="symbols"; } top.location = '/rloopList.jsp?searchFor=' + type + '&keyword=' + value; } } function changeLiSize(){ var selectId = document.getElementById("myNavigator"); } function showMoreOrLess(){ var selectId = document.getElementById("showIntroduction"); var selectText = document.getElementById("introductionText"); if(selectId.innerText == "Show more"){ selectText.style.height="auto"; selectId.innerText="Show less"; }else{ selectText.style.height="120px"; selectId.innerText="Show more"; } } function showMoreOrLess2(){ var selectId2 = document.getElementById("showNews"); var selectText2 = document.getElementById("newsDiv"); if(selectId2.innerText == "Show more"){ selectText2.style.height="auto"; selectId2.innerText="Show less"; }else{ selectText2.style.height="220px"; selectId2.innerText="Show more"; } } var publicationDivHeight = document.getElementById('publicationDiv').clientHeight; </script>
07-29
<%-- Created by IntelliJ IDEA. User: vili Date: 2019/8/23 Time: 13:56 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@page isELIgnored="false" %> <html> <head> <title>商品列表</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="layer/layer.js"></script> <script type="text/javascript" src="js/cart.js"></script> </head> <body> <!--header--> <jsp:include page="/header.jsp"> <jsp:param name="flag" value="1"></jsp:param> </jsp:include> <!--banner--> <div class="banner"> <div class="container"> <h2 class="hdng"><a href="book_detail.action?bid=${scrollBook.bid}">${scrollBook.bname}</a><span></span></h2> <p>今日精选推荐</p> <a class="banner_a" href="javascript:;" onclick="buy(${scrollBook.bid})">立刻购买</a> <div class="banner-text"> <a href="book_detail.action?bid=${scrollBook.bid}"> <img src="${scrollBook.bcover}" alt="${scrollBook.bname}" width="350" height="350"> </a> </div> </div> </div> <!--//banner--> <!--gallery--> <div class="gallery"> <div class="container"> <div class="alert alert-danger">热销推荐</div> <div class="gallery-grids"> <c:forEach items="${hotList}" var="book"> <div class="col-md-4 gallery-grid glry-two"> <a href="book_detail.action?bid=${book.bid}"> <img src="${book.bcover}" class="img-responsive" alt="${book.bname}" width="350" height="350"/> </a> <div class="gallery-info galrr-info-two"> <p> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> <a href="book_detail.action?bid=${book.bid}">查看详情</a> </p> <a class="shop" href="javascript:;" onclick="buy(${book.bid})">立刻购买</a> <div class="clearfix"> </div> </div> <div class="galy-info"> <p>${book.btname} > ${book.bname}</p> <div class="galry"> <div class="prices"> <h5 class="item_price">¥ ${book.bprice}</h5> </div> <div class="clearfix"></div> </div> </div> </div> </c:forEach> </div> <div class="clearfix"></div> <div class="alert alert-info">新品推荐</div> <div class="gallery-grids"> <c:forEach items="${newList}" var="book"> <div class="col-md-3 gallery-grid "> <a href="book_detail.action?bid=${book.bid}"> <img src="${book.bcover}" class="img-responsive" alt="${book.bname}"/> </a> <div class="gallery-info"> <p> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> <a href="book_detail.action?bid=${book.bid}">查看详情</a> </p> <a class="shop" href="javascript:;" onclick="buy(${book.bid})">立刻购买</a> <div class="clearfix"> </div> </div> <div class="galy-info"> <p>${book.btname} > ${book.bname}</p> <div class="galry"> <div class="prices"> <h5 class="item_price">¥ ${book.bprice}</h5> </div> <div class="clearfix"></div> </div> </div> </div> </c:forEach> </div> </div> </div> <!--//gallery--> <!--subscribe--> <div class="subscribe"></div> <!--//subscribe--> <!--footer--> <jsp:include page="/footer.jsp"></jsp:include> </body> </html> <%-- Created by IntelliJ IDEA. User: vili Date: 2019/8/24 Time: 17:09 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@page isELIgnored="false" %> <!DOCTYPE html> <html> <head> <title>后台管理</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body> <div class="container-fluid"> <jsp:include page="header.jsp"></jsp:include> <br><br> <div class="alert alert-success" role="alert">欢迎进入叮当书城后台管理系统!</div> </div> </body> </html> 如何使后台管理页面能从主页进行跳转,直接输出修改后的代码
06-20
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值