2

我已经定义了一个全局变量，然后将其设置为通过我的一个渲染图表的模块提供的方法。该模块应返回一个图表，从而为变量“alChart”分配一个图表对象。还值得一提的是，使用此代码可以完美呈现图表。

图表渲染模块：

var ChartRendererGateway = (function ($, Highcharts) {

"use strict";

//Private variables
var chart;
var result;

//Private methods
var success = function (data, textStatus, jqXHR) {

    var seriesObject = $.parseJSON(data);
    result = seriesObject;

};

var fail = function () {

    errorController.showError("Something went wrong when trying to load the chart data")

};

var drawChart = function (renderTo, options) {
    options.chart.renderTo = renderTo;
    options.series = result;
    chart = new Highcharts.Chart(options);
};

//Public methods
return {

    render: function (renderTo, promise, options) {

        promise.then(success, fail)
            .done(function () {
                drawChart(renderTo, options);
            })
            .fail(function () {
                errorController.showError("Something went wrong fetching chart data!");
            });

        return chart; //Chart object exists here, but is undefined when inspecting variable it is assigned to in the .ready function
    },

    destroy: function(chartName){
        chartName.destroy();
    }
};

})(jQuery, Highcharts);

。准备好（）：

//Global Variables
var alChart;

//DOM Ready
$(function () {

var chartData = ChartDataGateway.getSeries("/Dashboard/GetAssetLiabilityChartData");

alChart = ChartRendererGateway.render("dashboard-AL-chart", chartData,
    {
        chart: {
            type: 'line',
            zoomType: 'xy'
        },
        title: {
            text: null
        },
        xAxis: {
            title: {
                text: 'Date'
            },
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Amount'
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            line: {
                allowPointSelect: true,
                cursor: 'pointer',
                marker: {
                    enabled: true,
                    radius: 1,
                    symbol: 'circle',
                    states: {
                        select: {
                            fillColor: '#fff',
                            radius: 4,
                            halo: {
                                size: 4,
                                attributes: {
                                    'stroke-width': 1,
                                    stroke: '#003f72'
                                }
                            }
                        }
                    }
                }
            }
        }
    });
console.log(alChart); //This is returning 'undefined' and NOT the chart object WHY?! :S

});
4

1 回答 1

2

我以前对 jQuery 的 promises 做的不多，但我对此有所了解。要链接值，我认为您需要在 jQuery 中的每一步创建新的 Promise（如果您执行 .then().then()，您会在每个步骤中获得相同的数据，而不是从前一个 .then() 返回的数据） . 因此，每次您需要新数据并且它正在处理异步事物时，如果您正在更改数据并想要进一步更改它，您需要创建一个新的 Promise 来链接每次。

这是一个示例，说明如何以基本形式实现您想要的：

function doSomething() {
  var deferred = jQuery.Deferred();  

  // Asynchronous action
  setTimeout(function() {    
    deferred.resolve("some data");
  }, 1000);

  return deferred.promise();
}

function doSomethingElse() {
  var deferred = jQuery.Deferred();

  // Has to wait for asynchronous action
  doSomething()
    .then(function(data) {
      console.log(data); // Should be "some data"

      deferred.resolve(data + " that's been added to");
    })
  ;

  return deferred.promise();
}

// Waits for everything to be done that's above, then console.logs end result
doSomethingElse()
  .then(function(data) {
    console.log(data); // Should be "some data that's been added to"
  })
;

你可以在这里看到这个：http: //jsbin.com/getiludexe/2/edit ?js,console

于 2014-12-09T09:43:18.310 回答