Go模板执行报错：base.html中找不到model模板

在Go代码中使用layout、view和partial模板，已成功加载layout和view。新增partials/model.html模板后，希望点击layout中的按钮弹出该模板内的div，但运行时出现错误：

error executing the template: html/template:base.html:20:15: no such template "model"

错误触发于base.html的这段代码：

<script>
  function showModel(){
    {{template "model" .}}
  }
</script>

相关代码结构 #

Go核心代码 #

import (
    "embed"
)

//go:embed libs/scripts layouts views partials scripts styles
var Views embed.FS

func Run(port string) {
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(Views))))

    http.HandleFunc("/messages/", messages)

    http.ListenAndServe(port, nil)
}

func main() {
    go func() {
        Run(":1235")
        println("server closed")
    }()
}

模板加载代码 #

func messages(w http.ResponseWriter, r *http.Request) {
    if tmpl, err := template.ParseFS(Views,
        "layouts/base.html",
        "views/messages.html",
        "partials/model.html"); err != nil {
        fmt.Println("Error in file parsing:", err)
    } else {
        err = tmpl.ExecuteTemplate(w, "messages.html", nil)
        if err != nil {
            fmt.Println("error executing the template:", err)
        }
    }
}

模板文件 #

partials/model.html

{{define "model"}}
<link rel="stylesheet" href="http://localhost:1235/static/styles/model.css">
<div id="modal1" class="overlay">
    <a class="cancel" href="#"></a>
    <div class="modal">
        <h2>This is Modal Overlay 1</h2>
        <div class="content">
            <p>Click outside the modal to close.</p>
        </div>
    </div>
</div>
{{end}}

views/messages.html

<!-- messages -->
{{template "base" .}}
{{define "body"}}
<body>
<div></div>
<script src="http://localhost:1235/static/scripts/messages.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
{{end}}

layouts/base.html

<!-- base layout -->
{{define "base"}}
<!DOCTYPE html>
<html lang="ar-AR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WhatsApp</title>
  <link rel="stylesheet" href="http://localhost:1235/static/styles/style.css">
</head>
<body>
<button type="button" onClick="showModel()">
   Send
</button>
        {{template "body" .}}
</body>
<script>
  function showModel(){
    {{template "model" .}}
  }
</script>
</html>
{{end}}

你混淆了服务器端模板渲染和客户端JavaScript执行的时机：

1. Go的模板指令{{template "model" .}}是在服务器返回页面之前执行的，页面发送到浏览器后，模板逻辑已经全部处理完毕。
2. 把模板指令放在客户端JavaScript函数中，浏览器无法识别Go的模板语法，且此时服务器已经完成渲染，无法再触发模板调用。

1. 调整模态框实现逻辑 #

提前在服务器端渲染模态框的HTML内容（默认隐藏），用客户端JavaScript控制其显示/隐藏状态。

2. 修改模板代码 #

调整layouts/base.html #

<!-- base layout -->
{{define "base"}}
<!DOCTYPE html>
<html lang="ar-AR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WhatsApp</title>
  <link rel="stylesheet" href="http://localhost:1235/static/styles/style.css">
</head>
<body>
<button type="button" onClick="showModel()">
   Send
</button>
        {{template "body" .}}
        <!-- 提前渲染模态框，默认隐藏 -->
        {{template "model" .}}
</body>
<script>
  function showModel(){
    // 控制模态框显示
    document.getElementById('modal1').style.display = 'block';
  }
  // 点击取消按钮关闭模态框
  document.querySelector('.cancel').addEventListener('click', function(e){
    e.preventDefault();
    document.getElementById('modal1').style.display = 'none';
  });
</script>
</html>
{{end}}

调整partials/model.html #

给模态框添加默认隐藏样式：

{{define "model"}}
<link rel="stylesheet" href="http://localhost:1235/static/styles/model.css">
<!-- 默认隐藏模态框 -->
<div id="modal1" class="overlay" style="display:none;">
    <a class="cancel" href="#"></a>
    <div class="modal">
        <h2>This is Modal Overlay 1</h2>
        <div class="content">
            <p>Click outside the modal to close.</p>
        </div>
    </div>
</div>
{{end}}

3. 保留现有模板加载逻辑 #

你当前的ParseFS代码已经正确包含了partials/model.html，无需修改。

内容的提问来源于stack exchange，提问作者Hasan A Yousef