0

ASP.NET MVC 4 のデュランダル/ホット タオル テンプレートで 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 アプリでは、その時点で index.html ( applicationHost) のコンテンツのみがレンダリングされているため、document ready を使用する必要はありません。他のすべては、デュランダルの構成を使用して DOM に注入されます。

これらの構成された DOM フラグメントを操作するには、html ビューに付随する vm にviewAttachedコールバックを追加します。viewAttachedパラメーターとして渡された構成ビューを取得します。これは、jQuery セレクターを制限するために使用する必要があります。

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

ほとんどの場合、jQuery プラグインを機能させるにはこれで十分です。ただし、Durandal 1.2viewAttachedでは、構成されたフラグメントが必ずしも DOM ではなく親要素にアタッチされるようにするだけなので、ハイチャートを機能させるのにこれで十分かどうかを確認する必要があります。この問題は、今後の Durandal 2.0 でdocumentAttachedコールバックを導入することで対処される予定です。

于 2013-06-25T08:23:14.967 に答える