Question

我有一个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");
    }
});

任何帮助将不胜感激。：）

Answer 1

我看到您的车把模板和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"> ...

我在外部字符串周围使用单引号，因此我可以在其中使用双引号。否则你必须逃避它们，这是一种痛苦。

如果这不能解决您的问题，我会建议您获得进一步的帮助，以及您解释如何（以及在何处）调用您的把手模板。

更新div中的<h1>数据

1 个答案: