Question

我们在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语句中的函数，是否还需要执行一些额外的步骤？

先谢谢！

Answer 1

在典型的Durandal应用程序中，不需要使用文档就绪，因为此时只有index.html（applicationHost）的内容已经呈现。使用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回调来解决。

Highcharts无法在Durandal / Hot Towel模板中呈现的问题

1 个答案: