0

バックボーン ビュー (file.js) に関数があり、以下の形式の JSON 応答が取り込まれます:-

バックボーン ビューの機能:-

chart_data: function(){
    var all_stats = this.collection.toJSON();
    $("#page-container").html(this.users_by_loc({
        platform_stats: all_stats,
        graph_data: all_stats.items.slice(0,5) 
        // I want to use the top 5 entries to plot graph
    }));
}

all_statsの一部として存在する応答(私の API 呼び出しから - サーバー側で Rails を使用しています):-

{
   "items":
   [
       {
           "loc": "Chennai",
           "users": 11707
       },
       {
           "loc": "Hyderabad",
           "users": 4327
       },
       {
           "loc": "Pune",
           "users": 3625
       },....(many more entries)

   ]
}

ここで、 graph_dataパラメーター (上記のバックボーン ビューで定義) に存在する json 応答を、 jst.ejsテンプレート (以下のコード)で定義されているchartDataという変数に渡そうとしています。この変数 (chartData) は、AM チャート JS コードで実際にグラフをプロットするために使用されます。

グラフ データを入力してグラフをプロットするコードを含む私のjst.ejsファイルは次のようになります。

<script>
    var chart;  

    chartData = "<%= graph_data %>"    
    console.log("chartData: ", chartData);

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;

                //additional code to help plot the chart  

                chart.write("chartdiv");
            });

</script>

<div id="chartdiv" style="width: 60%; height: 400px;"></div>

私の現在の障害は、私がそうするときです..

chartData = "<%= graph_data %>"    
console.log("chartData: ", chartData);

.. 私のjst.ejsテンプレートでは、実際のデータをall_statsの一部として持つ代わりにchartData変数（上に表示）は、firebugコンソールで次を返します：-

chartData: [object Object],[object Object],[object Object],[object Object],[object Object]

グラフをプロットするために、 graph_data変数 (バックボーン ビューの一部として) に存在する実際のデータを、 jst.ejsテンプレートに存在する変数chartDataに正しく割り当てるにはどうすればよいですか?

4

1 に答える 1

0

テンプレートに「実際の」JavaScript コードを混在させる (つまり<script>、テンプレートをまとめるための単純な JavaScript の断片ではなく、テンプレートに を投げ込む) と、通常はうまくいきません。懸念事項を分離すると、通常は簡単になります。HTML っぽいものはテンプレートに入れ、機能はビューに接続します。

私は amChart にはあまり詳しくありませんが、多くのチャート作成 (およびマッピング) ライブラリは、作業を行う前に、ターゲット要素についていくつかの重要なことを知る必要があります。特に、彼らは通常、ページ上のどこにあるのか、どのくらいの大きさなのかを知りたがりますが、それらは<div>ページにレンダリングされるまでわかりません。バックボーン アプリでは、通常、誰かがビューをrender編集してページに追加するまでは当てはまりません。el

var v = new View;
// We don't know the position or size of anything yet.
v.render();
// We still don't know.
$('body').append(v.el);
// Now the size and position are available but we might have to
// pass control back to the browser first.

amChartidが描画する必要がある DOM 内の何かを明らかに望んでいるという追加の困難に直面しています。

chart.write("chartdiv");

ただし、 afterが呼び出され、誰かが a (または同等の)を実行するdocument.getElementById('chartdiv')まで、有用なものは何も返されません。renderx.append(v.el)

誰かがel呼び出しの直後にビューをページに表示することを期待している場合renderは、ブラウザーが制御を取り戻した後に実行するコードをキューに入れることができます (したがって、物事のサイズと位置を把握し、document.getElementById('chartdiv')何か役立つことを行う時間があります)。 )setTimeoutゼロのタイムアウトで使用することにより:

render: function() {
    var _this = this;
    var chartData = ....

    // Do normal rendering and template stuff.

    setTimeout(function() {
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        //...
        chart.write("chartdiv");
    }, 0);
    return this;
}

もう少し明確にしたい場合_.deferは、 (これは よりも少し多い) を使用することもできます。setTimeout(..., 1)

対処すべきいくつかの amChart 固有のものがあるかもしれませんが、うまくいけば、これは難しい部分を処理します。

ところで、AmCharts.readyコメントで言及したその呼び出しは、おそらく単一ページのアプリではうまく機能しない可能性があります。これは、おそらく同等で$(document).ready()あり、ページが読み込まれたときにのみ起動するためです（つまり、単一ページのアプリの期間中に1回だけ） . 代わりに使用できる他のイベントがあるかもしれませんが、ドキュメント対応イベントに依存する代わりに、既存のバックボーン ビュー構造を使用できるはずです。

于 2013-09-09T05:16:05.523 に答える