我有一个div,里面嵌入了一些动态<h1>
元素。我想更新这些<h1>
元素。但我无法弄清楚如何。我正在使用把手将数据提供给<h1>
。
这是div的代码。
<div class="homepage-availability-div">
{{#each availData as |index|}}
<div class="homepage-availability-inner-div">
<h1 class="homepage-availability-text"> {{@key}}: <span class="dashboard-success">{{this}}% </span> </h1>
</div>
{{/each}}
</div>
这就是我试图做到的。
$.ajax({
url: url,
headers: { 'x-cyclops-ajax': 'yes' },
method: 'GET',
dataType: 'json',
success: function(data) {
var chart = $('#container').highcharts();
var keys = Object.keys(data["histData"]);
$( ".main-div" ).empty();
for( var i=0; i< keys.length; i++) {
chart.series[i].setData(data["histData"][keys[i]]["histFailure"], true);
$( ".main-div" ).append( "<div class=homepage-availability-inner-div><h1 class=homepage-availability-text> " + keys[i] + ": <span class=dashboard-success>" + data["availData"][keys[i]] + " </span> </h1></div>" );
}
chart.xAxis[0].setCategories(data["histKeys"]);
console.log("Data:" + JSON.stringify(data["availData"]));
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("Did not hit the AJAX call");
}
});
任何帮助将不胜感激。 :)
答案 0 :(得分:0)
我看到您的车把模板和JavaScript之间没有关联。您发出ajax请求,然后获取该数据并尝试手动更新<div class="main-div">
代码的内容:
var keys = Object.keys(data["histData"]);
$( ".main-div" ).empty();
for( var i=0; i< keys.length; i++) {
chart.series[i].setData(data["histData"][keys[i]]["histFailure"], true);
$( ".main-div" ).append( "<div class=homepage-availability-inner-div><h1 class=homepage-availability-text> " + keys[i] + ": <span class=dashboard-success>" + data["availData"][keys[i]] + " </span> </h1></div>" );
}
此数据来自您的ajax调用,而不是来自您的模板(除非您正在应用此模板服务器端?!)。
现在,这里的逻辑是不正确的,因为你的div是不正确的。例如,该类需要引用:
... '<div class="homepage-availability-inner-div"><h1 class="homepage-availability-text"> ...'
以及后来:
... <span class="dashboard-success"> ...
我在外部字符串周围使用单引号,因此我可以在其中使用双引号。否则你必须逃避它们,这是一种痛苦。
如果这不能解决您的问题,我会建议您获得进一步的帮助,以及您解释如何(以及在何处)调用您的把手模板。