Dynamische Variablen Namen Javascript MVC

Question

Ich bin ein bisschen JavaScript-Code in einer Schleife laufen, Erstellen eines Diagramms (mit Google-Visualisierung). Nachdem dieser Code ausgeführt wurde, muss ich auf diese Objekte woanders zugreifen. Mein Problem ist, dass ich nicht einfach "chart" aufrufen kann, da es jetzt überschrieben wurde.

Ich habe es geschafft, eine wirklich hacky Lösung zu finden, die MVC @ Sache verwendet, um etwas zur Laufzeit dynamisch zu generieren, die ich dann als Variablennamen erzwinge. Es funktioniert, aber ich glaube nicht, dass es der richtige Weg ist, um dieses Problem anzugehen. Gibt es eine Möglichkeit für mich, den Namen der Variablen bei jeder Ausführung dynamisch zu ändern?

Der folgende Code wird mehrmals ausgeführt.

myChart ändert sich jedes Mal, wenn der Code ausgeführt wird, was mir eine wirklich hacky Zeichenfolge gibt. Indem es ohne die Markierungen eingefügt wird, wird es zur Laufzeit eine Variable. Nach allem, was läuft, habe ich eine Formatfunktion, welche die folgenden ausführen:

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

Dies ist auch super hacky. Ich nutzte wie Javascript Leerzeichen ignoriert, so dass ich @myChart wie ein Objekt behandeln kann.

Das Ergebnis ist mit Syntaxfehlern gespickt, aber es wird weiterhin ausgeführt, und es wird mit den beabsichtigten Ergebnissen ausgeführt. Also meine Frage ist, ob es eine "richtige" Lösung dafür gibt, anstatt separate JavaScript-Funktionen für jedes einzelne Diagramm zu machen, das ich machen muss.

Danke.

Answer 1

Es ist nichts falsch mit dem, was Sie getan haben, aber es könnte besser sein.

Zuerst müssen Sie sich nicht auf einen Platz verlassen, um JavaScript und Razor zu mischen.

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

Aber das ist immer noch hässlich.

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

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

Ansatz # 2 meine bevorzugte Methode ist, wie es Umfang verwaltet und ist klar zu lesen.