Golang模板中的嵌套范围答案

【问题标题】：Nested ranges in Golang templateGolang模板中的嵌套范围
【发布时间】：2017-11-30 12:00:54
【问题描述】：

我对此很陌生，所以我需要一点帮助。

我有两个这样的结构：

type School struct {
    ID          string
    Name        string
    Students    []Student
}

type Student struct {
    ID          string
    Name        string
}

我需要做的是，当我从第一个选择元素中选择一个学校对象时，第二个选择元素仅显示来自所选学校的学生。对象学校数组正确显示所有数据。

<div>
  <select name="school">
      {{range .Schools}}
          <option value="{{.ID}}">{{.Name}}</option>
      {{end}}
  </select>
</div>   <div>
  <select name="student">
  {{range .Students}}
          <option value="{{.ID}"> {{.Name}}</option>
       </select>
  {{end}}  </div>

我需要在第二个范围内选择 selectedSchoolObject.Students 之类的内容。

提前致谢！

【问题讨论】：

标签： html templates go struct nested

【解决方案1】：

Go 模板在 服务器端，在您的 Go 应用程序中/由您的 Go 应用程序执行和呈现。

当您在学校下拉列表中选择某些内容时，会发生在浏览器中的客户端。

浏览器无法执行 Go 模板。所以基本上你有两个选择：

1) 当用户更改“学校”下拉菜单的选择时，重新渲染页面。这涉及发送一个新的 HTTP 请求，例如，您可以在 URL 参数中提供所选学校的 ID，Go 模板可能仅在第二个下拉列表中呈现所选学校的学生。

2) 您可以使用 JavaScript 代码在客户端实现此功能。为此，您需要在呈现的 HTML 页面中包含所有学校的所有学生，例如在 JavaScript 数组中，并使用 JavaScript 代码更改学生下拉列表的内容。

阅读相关问题：

Referencing Go array in Javascript

Interactive web pages in Go

Dynamically refresh a part of the template when a variable is updated golang

Creating load more button in Golang with templates

【讨论】：

选项 2 也可以在不预加载所有学生的情况下完成，方法是在选择学校时使用 AJAX 调用为学校获取学生。如果学生总数很大，这可能会更好。
@Adrian 是的，你是对的。它肯定会更有效，但实施起来会更复杂。
肯定更复杂。只是不希望 OP 在 The Daily WTF 上结束，因为他在每次页面加载时都会填充一个由 1000 万学生组成的 JavaScript 数组。
谢谢，您的回答真的很有帮助。请查看我的答案，我是如何解决这个问题的。

【解决方案2】：

我已经在客户端使用 Javascript 解决了这个问题。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function() {
        var school = {};
        var schoolsArray = [];
        {{range .Schools}}
            school.ID = {{.ID}};
            school.Name = {{.Name}};
            school.Students = {{.Students}};
            schoolsArray.push(school);
        {{end}}

        $("#school").change(function() {
            var parent = $(this).val();
            Object.keys(schoolsArray).forEach(function (key) {
                if (schoolsArray[key]['ID'] === parent) {
                    var students = schoolsArray[key]['Students'];
                    listStudents(students);
                }
            });
        });
        function listStudents(students) {
            Object.keys(students).forEach(function (key) {
                $('#student').append($('<option>', {
                    value: students[key]['ID'],
                    text : students[key]['Name']
                }));
            });
        } </script>

这是我的 HTML 代码：

<div>
  <select name="school" id="school">
      {{range .Schools}}
          <option value="{{.ID}}">{{.Name}}</option>
      {{end}}
  </select>
</div>   <div>
  <select name="student" id="student">
       </select>
</div>

希望这对其他人也有帮助。此外，欢迎提出任何改进此代码的建议。

【讨论】：