問題描述
我瀏覽了許多試圖解釋如何實現這一目標的帖子，但是沒有一個可以幫助我解決問題.
I have scoured through numerous posts that try and explain how to achieve this, however none have helped me solve the problem.
我有一個 HTML 文件，其中包含一個 XML 解析 JavaScript 函數，該函數依次呈現 XSLT 文件.問題是，我的 XML 文件中有多個記錄"，我只想要一個 XSLT 來呈現每條記錄(而不是每條記錄一個單獨的 XSLT 文件).根據下面的代碼，請有人建議我如何從 JavaScript 傳遞一個包含記錄 id 的參數(在我的 XML 文件中的每個 XML 記錄中)，以便單個"XSLT 可以使用來自的正確數據解析布局參數.
I have a HTML file which contains an XML parsing JavaScript function which in turn renders the XSLT file. The issue is, I have multiple 'records' in my XML file and I only want a single XSLT to render each of records (instead of a separate XSLT file per record). Based on the code below, please could someone advise on how I can pass a parameter from JavaScript containing the record id (in each XML record in my XML file) so that the 'single' XSLT can parse the layout with the correct data sourced from the parameter.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<title>Weather App</title>
<link href="../../css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../../css/animate.css" type="text/css" rel="stylesheet" />
<link href="../../css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<div id="WeatherDetailsContainer"></div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="../../js/materialize.js"></script>
<script>
$(function(){
RenderXSLT();
});
function loadXMLDoc(filename) {
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {
xhttp.responseType = "msxml-document"
} catch (err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
function RenderXSLT() {
xml = loadXMLDoc("datastore/Weather.xml");
xslt = loadXMLDoc("transformations/WeatherDetailsCard.xslt");
var currentLocation = localStorage.getItem('current_weather_location');
if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
ex = xml.transformNode(xslt);
document.getElementById("WeatherDetailsContainer").innerHTML = ex;
}
else if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
/** I believe this is how to set the param, but it didn't work **/
//xsltProcessor.setParameter(null, "cityname", currentLocation);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("WeatherDetailsContainer").appendChild(resultDocument);
}
}
</script>
</body>
</html>
XML 文件
<?xml version="1.0" encoding="UTF-8" ?>
<locations>
<location>
<cityid>Lon</cityid>
<cityname>London</cityname>
<temperature>11</temperature>
<high>13</high>
<low>4</low>
<date>17/03/2015</date>
</location>
<location>
<cityid>Man</cityid>
<cityname>Manchester</cityname>
<temperature>07</temperature>
<high>08</high>
<low>2</low>
<date>17/03/2015</date>
</location>
<location>
<cityid>Gla</cityid>
<cityname>Glasgow</cityname>
<temperature>05</temperature>
<high>06</high>
<low>1</low>
<date>17/03/2015</date>
</location>
</locations>
XSLT 文件
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
<xsl:for-each select="locations/location[cityname='London']">
<div class="section">
<div class="container">
<div class="row">
<div class="col s4 m4 l4">
<div class="card-panel z-depth-3 animated fadeInUp" style="padding:10px 10px 5px 10px !important;">
<span class="center-align">
<h5><xsl:value-of select="cityname"/></h5><span> (<xsl:value-of select="cityid"/>)</span>
</span>
<p>Temp: <xsl:value-of select="temperature"/></p>
<p>High: <xsl:value-of select="high"/></p>
<p>Low: <xsl:value-of select="low"/></p>
</div>
</div>
</div>
</div>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
推薦答案
在XSLT中你需要改變
In the XSLT you need to change
<xsl:template match="/">
<!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
<xsl:for-each select="locations/location[cityname='London']">
到
<xsl:param name="cityname"/>
<xsl:template match="/">
<!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
<xsl:for-each select="locations/location[cityname = $cityname]">
我還會設置 <xsl:output method="html"/> 因為您只是創建 HTML 片段，而 XSLT 處理器不知道如果您不設置輸出方法.
I would also set <xsl:output method="html"/> as you are only creating a fragment of HTML and the XSLT processor does not know that if you don't set the output method.
在您的 Mozilla、Chrome、Opera 的 Javascript 代碼中，我會更改檢查
In your Javascript code for Mozilla, Chrome, Opera I would change the check
else if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
/** I believe this is how to set the param, but it didn't work **/
//xsltProcessor.setParameter(null, "cityname", currentLocation);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("WeatherDetailsContainer").appendChild(resultDocument);
}
到
else if (typeof XSLTProcessor !== 'undefined') {
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
xsltProcessor.setParameter(null, "cityname", currentLocation);
var resultFragment = xsltProcessor.transformToFragment(xml, document);
document.getElementById("WeatherDetailsContainer").appendChild(resultFragment);
}
你的 IE 代碼 transformNode 不允許設置參數，你也需要改變那部分，改變
Your IE code with transformNode does not allow to set parameters, you will need to change that part as well, change
if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
ex = xml.transformNode(xslt);
document.getElementById("WeatherDetailsContainer").innerHTML = ex;
}
到
if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
var template = new ActiveXObject('Msxml2.XslTemplate');
template.stylesheet = xslt;
var proc = template.createProcessor();
proc.input = xml;
proc.addParameter('cityname', currentLocation);
proc.transform();
document.getElementById("WeatherDetailsContainer").innerHTML = proc.output;
}
這篇關于如何從 Javascript 函數將參數傳遞給 XSLT的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！