javascript - 动态变量名称javascript MVC

Question

我在一个循环中运行了一些 javascript 代码，创建了一个图表(使用谷歌可视化)。运行所有这些代码后，我需要在其他地方访问这些对象。我的问题是我不能再次调用“图表”，因为它现在已经被覆盖了。

我设法找到了一个非常棘手的解决方案，其中涉及使用 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();

这也是 super hacky。我利用了 javascript 如何忽略空格，这样我就可以像对待对象一样对待 @myChart。

结果充满了语法错误，但它仍然可以运行，并且运行时会产生预期的结果。所以我的问题是是否有一个“合适的”解决方案，而不是为我需要制作的每个单独的图表制作单独的 javascript 函数。

谢谢。

Answer 1

您所做的并没有错，但还可以做得更好。

首先，您不必依赖空间来混合 JavaScript 和 Razor。

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

但这仍然很难看。

方法一

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

方法二

<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 是我的首选方法，因为它管理范围并且清晰易读。