javascript - 在 Javascript 中引用 Go 数组

标签 javascript html go go-templates

我有一个 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 .Array 0}}在您的 Go 应用程序的服务器端执行。

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

模板操作中使用的模板参数值(在您的示例中为 Array)不存在 在客户端(例如作为 Javascript 对象)。和Javascript代码未运行 通过模板引擎。因此模板参数(值)和 Javascript(执行)存在于 2 个不同的“空间”中。

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

您有 2 个选项:

1) 用模板 Action 做你想做的事。

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

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

详细说明 #1

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

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

当然,您可以将任何其他内容放入 block 中,而不仅仅是数组元素。您甚至可以像这样访问当前索引:
{{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>

或者由于模板引擎支持将数组和 slice “渲染”为 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>

关于javascript - 在 Javascript 中引用 Go 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59392336/

相关文章:

javascript - 检测和管理选定的文本

javascript - jQuery - 在垂直鼠标滚动时水平动态移动元素 - 滚动方法不适用于自定义变量

go - 如何使用 go-twitter bot 上传媒体?

testing - Cobra:如何在测试中以编程方式设置标志

http - 检查来自应用程序的 Internet 连接

javascript - 使用 js 创建的表的滚动功能

javascript - jsFiddle 如何允许并执行用户定义的 JavaScript 而不会造成危险?

Javascript/jQuery - 以英尺和英寸显示英寸

html - 如何在使用 ffmpeg php 启动流后停止流?

html - css 堆叠顺序,z-index