Durandal/热毛巾模板中未显示Highcharts的问题 [英] Issue with Highcharts not rendering in Durandal/Hot Towel Template

问题描述

我们在ASP.NET MVC 4的Durandal/Hot Towel模板中使用HighCharts.js.我们只是在为仪表板页面使用图表API的过程中证明了概念验证.但是，在页面加载期间，该图形未呈现在页面上.

We're using HighCharts.js in a Durandal/Hot Towel template in ASP.NET MVC 4. We are simply showing a proof of concept in using a charting API for a dashboard page. However, the graph is not rendering on the page during page load.

我们有一个自定义.js文件，其中包含以下代码(从HighCharts.com复制和粘贴):

We have a custom .js file that holds the following code (copied and pasted from 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:

And a div in an HTML view that is rendering correctly:

<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>

脚本捆绑程序包含以下文件:

The script bundler contains the following files:

.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应用程序中成功渲染图形.

Yet the graph does not render. I've been able to successfully render the graph in a Bootstrap application, working with the scripts listed above.

要在单个页面应用程序上使用document.ready语句中的函数，是否还需要执行其他步骤?

Is there an extra step that must be done in order to work with functions inside document.ready statements on a single page application?

感谢进阶！

推荐答案

在典型的Durandal应用中，无需使用准备就绪的文档，因为此时仅呈现了index.html(applicationHost)的内容.通过使用Durandal的组成，其他所有内容都将注入到DOM中.

In a typical Durandal app there's no need to use document ready as at that point only the content of index.html (applicationHost) has been rendered. Everything else gets injected into the DOM by using Durandal's composition.

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

In order to work with these composed DOM fragments add a viewAttached callback in the vm that accompanies the html view. viewAttached gets the composed view passed in as parameter, which should be used to restrict the jQuery selector.

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

在大多数情况下，这足以使jQuery插件正常工作.但是，在Durandal 1.2中，viewAttached仅确保将组成的片段附加到其父元素，而不必附加到DOM，因此您必须检查这是否足以使highcharts正常工作.在即将推出的Durandal 2.0中，将通过引入

In most instances that should be sufficient to get jQuery plugins working. However in Durandal 1.2 viewAttached just ensures that the composed fragment is attached to its parent element not necessarily to the DOM, so you'd have to check if this is sufficient to get highcharts working. That issue will be addressed in upcoming Durandal 2.0 by introducing a documentAttached callback.

这篇关于Durandal/热毛巾模板中未显示Highcharts的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！