3

我有一个 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 不喜欢它，它不会加载。

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

有任何想法吗？

4

2 回答 2

10

你需要明白一些事情：

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

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

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

话虽如此，不可能将模板操作/变量和 Javascript 执行混合在一起。

您有 2 个选项：

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

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

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

详细说明 #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>
于 2015-02-26T21:53:03.887 回答
3

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

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

var javaScriptHtmlVariable = "";

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

这将呈现：

javaScriptHtmlVariable += 'One';
javaScriptHtmlVariable += 'Two';
javaScriptHtmlVariable += 'Three';
javaScriptHtmlVariable += 'Four';
// etc..
于 2015-02-26T21:54:51.597 回答