動的変数名javascript MVC

Question

私はループ内でJavaScriptコードを実行しています（Googleビジュアライゼーションを使用してグラフを作成しています）。このコードがすべて実行された後、私はこれらのオブジェクトに別の場所でアクセスする必要があります。私の問題は、今は上書きされているので、単に「グラフ」をもう一度呼び出すことができないということです。

私はMVC @を使って実行時に何かを動的に生成し、変数名として強制する、本当にハックな解決策を見つけ出しました。それは機能しますが、私はそれがこの問題に近づく正しい方法だとは思わないのです。実行するたびに変数の名前を動的に変更する方法はありますか？

次のコードは複数回実行されます。

@{ 
var myChart = "cData" + Model.ChartId.ToString(); 
} 
... 
function() { 
    @myChart = new google visualization.ChartWrapper({ ... }); 
    dashboard.bind(slider, @myChart); 
    dashboard.draw(data); 
} 

myChartは、コードが実行されるたびに変更され、本当にハックな文字列を与えます。 'マークなしでそれを置くことによって、実行時に変数になります。

@myChart .setOption('width', width); 
@myChart .setOption('height', height); 
@myChart .draw(); 

これもスーパーハックです：すべてのことが実行された後 は、私は次のことを実行してサイズ変更機能を持っています。私はjavascriptがスペースを無視する方法を利用したので、オブジェクトのように@myChartを扱うことができます。

結果に構文エラーがありますが、それでも実行され、意図した結果で実行されます。だから私の質問は、私が作る必要がある個々のグラフごとに別々のjavascript関数を作る代わりに、このための "適切な"ソリューションがあるかどうかです。

ありがとうございました。

Answer 1

あなたのやったことに何も問題はありませんが、それは良いかもしれません。

まず、JavaScriptとRazorを混在させるためにスペースを使用する必要はありません。

@(myChart).setOption('width', width); 

しかし、それはまだ醜いです。それはスコープを管理し、読むことは明らかであるよう

アプローチ1

<script> 

    // global (usual caveats about globals apply) 
    var charts = {}; 

</script> 

@for(int i = 0; i < 10; i++) 
{ 
    string chartId = "chart-" + i; 

    <script> 

     charts['@chartId'] = new Chart(); 
     charts['@chartId'].setOption('width', width); 
     charts['@chartId'].setOption('height', height); 
     charts['@chartId'].draw(); 

    </script> 
} 

アプローチ2

<script> 

    function doResize(chart) { 
     chart.setOption('width', width); 
     chart.setOption('height', height); 
     chart.draw(); 
    } 

</script> 

@for(int i = 0; i < 10; i++) 
{ 
    <script> 

     (function() { 

      // limit the scope of the "chart" variable 
      var chart = new Chart(); 

      // perform other init 

      // listen for resize in some manner 

      $(window).on("resize", function() { 
       doResize(chart); 
      }); 

     })(); 

    </script> 
} 

アプローチ＃2は、私の好ましい方法です。