knockout.js - Google Chart API 的 knockout 自定义绑定(bind) - 访问被拒绝

Question

几天来我一直在尝试如何做到这一点，并在谷歌上搜索构建的解决方案，但遗憾的是没有成功。

我正在为定制的电子商务产品构建一个管理部分。该管理区域完全构建为 SPA(单页应用程序)，可通过 AJAX 调用动态加载“ko”模板及其数据。

现在，手头的问题是我想在此 ko 模板中包含图表、饼图和其他数据可视化元素(即在仪表板模板的图表上很好地显示汇总数据)。

为此，我正在为 Google Chart API 开发“KO 自定义绑定(bind)” ，它被正确调用。

这就是我到目前为止所拥有的，它创建了一个固定图表(改编自: this sample )

ko.bindingHandlers.googleChart = {
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Revenue');
        data.addColumn('number', 'Average Revenue');
        data.addRows([
          ['2004', 1000, 630],
          ['2005', 1170, 630],
          ['2006', 660, 630],
          ['2007', 1030, 630]
        ]);

        var options = {
            title: 'Revenue by Year',
            seriesType: "bars",
            series: { 1: { type: "line" } },
            vAxis: {
                title: 'Year',
                titleTextStyle: { color: 'red' }
            },
            colors: ['red', 'black']
        };

        var chart = new google.visualization.ComboChart($(element));
        chart.draw(data, options);
    });
}};

然后，从模板中，我调用绑定(bind)，现在传递“false”，或来自 viewModel 的任何虚拟 ko.observable。

<script type="text/html" id="dashboard-admin-template">
    <div data-bind="googleChart: false"></div>    
</script>

现在，终于(抱歉花了这么长时间)，我遇到的问题是:

之后，google.load("visualization", "1", {packages: ["corechart"] });，'element'内容变得不可访问(无法发布捕获)从我的 IDE 中，因为我是声誉问题的新手)，使回调失败，并且不渲染图表。在调用“google.load”之前，“元素”内容都已存在并且可以访问。然后在调用回调时收到 Javascript 运行时错误:访问被拒绝。

希望能得到一些帮助，因为我陷入了这个困境。谢谢! 路易斯

Answer 1

让我重申一下正确的答案。

1. 将 google.load("visualization"... 从自定义绑定(bind)代码中取出
2. 避免调用 google.setOnLoadCallback(function()... 直接自行执行内部代码。

这是绑定(bind)现在的样子...

google.load("visualization", "1", { packages: ["corechart"] });
ko.bindingHandlers.googleChart = {
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {

    //TODO: load & handle visualization data using the 'valueAccessor'

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Average Revenue');
    data.addRows([
        ['2004', 1000, 630],
        ['2005', 1170, 630],
        ['2006', 660, 630],
        ['2007', 1030, 630]
    ]);

    var options = {
        title: 'Revenue by Year',
        seriesType: "bars",
        series: { 1: { type: "line" } },
        vAxis: {
            title: 'Year',
            titleTextStyle: { color: 'red' }
        },
        colors: ['red', 'black']
    };

    var chart = new google.visualization.ComboChart(element);
    chart.draw(data, options);
}};

希望这对解决类似问题的人有所帮助!