在 Javascript 中引用 Go 数组答案

【问题标题】：Referencing Go array in Javascript在 Javascript 中引用 Go 数组
【发布时间】：2015-04-29 08:55:57
【问题描述】：

我有一个 Golang 数组，我将在前端传递给我的 html 文件。

我知道

'{{ index .Array 0}}'

工作并从数组中提取第一个元素。但我想做一个Javascript for循环并像这样打印数组中的每个元素

<script type="text/javascript">
function loop() {

    html = ""
    for(var i = 0; i<5; i++) {
        html += "{{ index .Array " + i + "}}";
      }
}

但这不起作用。关于分离 go 数组索引字符串的东西，HTML/Javascript 不喜欢它，它不会加载。

这是一个我无法确定的语法错误。

有什么想法吗？

【问题讨论】：

代码产生一个字符串“{{ index .Array0}}{{ index .Array1}}{{ index .Array2}}{{ index .Array3}}{{ index .Array4}}” . .Array 和数字之间没有空格。
不抱歉-即使空间不起作用，我也对其进行了编辑以显示

标签： javascript html go go-templates

【解决方案1】：

你需要明白一些事情：

{{index .Array 0}} 等模板操作在您的 Go 应用程序的 服务器 端执行。

Javascript 代码在浏览器的客户端 端解释和运行。

模板操作中使用的模板参数值（在您的示例中为Array）在客户端不存在（例如，作为 Javascript 对象）。并且 Javascript 代码不被模板引擎运行。所以模板参数（值）和 Javascript（执行）存在于 2 个不同的“空间”中。

话虽如此，模板操作/变量和 Javascript 执行是不可能混合使用的。

你有两个选择：

1) 用模板动作做你想做的事。

2) 使用模板创建 Javascript 代码，当在客户端执行时，该代码将构建/重新创建数组作为 Javascript 对象，以便进一步处理 Javascript。

请注意，如果您只想循环遍历数组一次，则无需创建 Javascript 数组，您可以简单地在 {{range}} 模板操作中呈现将成为循环体的 JavaScript 代码。以Simon's answer 为例。

详细说明 #1

您可以使用{{range .Array}} 操作来循环Array，并为每个元素执行块，管道设置为数组元素，因此您可以像这样输出数组元素：

{{range .Array}}
    {{.}}
{{end}}

当然，您可以在块中放入任何其他内容，而不仅仅是数组元素。你甚至可以像这样访问当前索引：

{{range $idx, $value := .Array}}
    Index = {{$idx}}; Element = {{$value}}<br>
{{end}}

详述#2

假设您的 Array 包含 int 数字，您可以在 Javascript 中重新创建它，并使用这样的模板在 Javascript 中循环它：

<script>
    var arr = [
        {{range .Array}}
            {{.}},
        {{end}}
    ];

    // Now you have a javascript array: arr, loop over it to do something:
    html = "";
    for(var i = 0; i < arr.length; i++) {
        html += " " + arr[i];
    }
</script>

或者由于模板引擎支持将数组和切片“渲染”为 JavaScript 数组，您可以简单地编写：

<script>
    var arr = {{.Array}};

    // Now you have a javascript array: arr, loop over it to do something:
    html = "";
    for(var i = 0; i < arr.length; i++) {
        html += " " + arr[i];
    }
</script>

【讨论】：

【解决方案2】：

您不是“将 Golang 数组传递到前端”.. 您的模板正在服务器端呈现。这是一个重要的区别。

当您这样考虑时.. 句法问题变得清晰。您正试图在表达式中间将 Go 的模板语法与 Javascript 混合。这根本不正确。您应该使用 Go 循环，在渲染时生成有效的 Javascript 供客户端使用：

var javaScriptHtmlVariable = "";

{{ range .Array }}
    javaScriptHtmlVariable += '{{.}}';
{{ end }}

会渲染：

javaScriptHtmlVariable += 'One';
javaScriptHtmlVariable += 'Two';
javaScriptHtmlVariable += 'Three';
javaScriptHtmlVariable += 'Four';
// etc..

【讨论】：