Golangテンプレートのネストされた範囲

Question

私はこれでかなり新しいので、少し助けが必要です。

私はこのような2つの構造体があります：私は最初のselect要素から1校オブジェクトを選択したときに、私がする必要がどのような

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

type Student struct { 
    ID   string 
    Name  string 
} 

は、第2の選択要素が選択された学校からの学生のみが表示されること、です。オブジェクトスクールの配列はすべてのデータを正しく表示します。

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

は、私は2番目の範囲selectedSchoolObject.Studentsのようなものを選択する必要があります。

ありがとうございます！

Answer 1

Goテンプレートは、サーバー側で実行され、レンダリングされます。

ブラウザで、クライアント側で行わ学校のドロップダウンリストで何かを、選択し。

ブラウザはGoテンプレートを実行できません。したがって、基本的に2つのオプションがあります：

1）ユーザーがSchoolsドロップダウンの選択を変更したら、ページを再レンダリングします。これには、新しいHTTP要求を送信すること、選択したScoolのIDをURLパラメータに指定することなどがあります。Goテンプレートは、選択した学校の生徒のみを2番目のドロップダウンリストに表示します。

2）これはJavaScriptコードを使用してクライアント側で実装できます。このため、すべての学校のすべての生徒をレンダリングされたHTMLページに含める必要があります。 JavaScript配列を使用し、JavaScriptコードを使用してStudentsドロップダウンリストの内容を変更します。

読む関連の質問：私はクライアント側で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

Answer 2

。

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

が、これは同様に他の誰かのために役立つことを願っています。また、このコードを改善するための提案は大歓迎です。