Approach 1

Question

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

我已经设法找出一个非常hacky的解决方案，它涉及使用MVC @ thing在运行时动态生成一些东西，然后我强制它作为一个变量名。它有效，但我不认为这是解决这个问题的正确方法。有没有办法让我在每次运行时动态更改变量的名称？

以下代码多次运行。

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

myChart每次运行代码时都会更改，这给了我一个非常hacky的字符串。通过将其放在没有'标记的位置，它在运行时变为变量。完成所有操作后，我有一个调整大小的函数，它运行以下内容：

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

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

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

感谢。

Answer 1

There's nothing wrong with what you've done, but it could be better.

First, you don't have to rely on a space to mix JavaScript and Razor.

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

But that's still ugly.

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

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

Approach #2 is my preferred method as it manages scope and is clear to read.

动态变量名称javascript MVC

1 个答案:

Approach 1

Approach 2