0

我们在 ASP.NET MVC 4 的 Durandal/Hot Towel 模板中使用 HighCharts.js。我们只是展示了在仪表板页面中使用图表 API 的概念证明。但是，在页面加载期间，图表不会呈现在页面上。

我们有一个自定义 .js 文件，其中包含以下代码（从 HighCharts.com 复制并粘贴）：

$(document).ready(function () {
    $('#reportgraph').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

以及正确呈现的 HTML 视图中的 div：

<div class="row-fluid">
     <div class="span12">
          <div class="widget">
               <div class="widget-header">
                    <div class="title">Highcharts</div>
               </div>
               <div class="widget-body">
                    <div id="reportgraph" style="width:100%"></div>
               </div>
          </div>
     </div>
</div>

脚本捆绑器包含以下文件：

.Include("~/Scripts/jquery-1.9.1.min.js")
.Include("~/Scripts/highcharts.js")
.Include("~/Scripts/custom.js")
.Include("~/Scripts/bootstrap.js")
.Include("~/Scripts/knockout-{version}.debug.js")
.Include("~/Scripts/sammy-{version}.js")
.Include("~/Scripts/toastr.js")
.Include("~/Scripts/Q.js")
.Include("~/Scripts/breeze.debug.js")
.Include("~/Scripts/moment.js"));

然而，图表没有呈现。使用上面列出的脚本，我已经能够在 Bootstrap 应用程序中成功呈现图形。

为了在单页应用程序上使用 document.ready 语句中的函数，是否必须执行额外的步骤？

先谢谢了！

4

1 回答 1

3

在一个典型的 Durandal 应用程序中，不需要使用 document ready，因为此时只applicationHost呈现了 index.html ( ) 的内容。使用 Durandal 的composition将其他所有内容都注入到 DOM 中。

为了使用这些组合的 DOM 片段，在伴随 html 视图的 vm 中添加一个viewAttached回调。viewAttached获取作为参数传入的组合视图，该参数应用于限制 jQuery 选择器。

function viewAttached(view) {
    $('#reportgraph', view).highcharts({
        ...
    });
};

在大多数情况下，这足以让 jQuery 插件正常工作。然而，在 Durandal 1.2 中viewAttached，只是确保组合片段附加到其父元素而不一定附加到 DOM，因此您必须检查这是否足以让 highcharts 工作。该问题将在即将推出的 Durandal 2.0 中通过引入documentAttached回调来解决。

于 2013-06-25T08:23:14.967 回答