Блог

Главная - Вопросы по программированию - Шаблоны визуализации в приложении Go Fiber

Шаблоны визуализации в приложении Go Fiber

# #go #templates #render #fibers

Вопрос:

У кого-нибудь есть хорошие примеры gofiber и шаблонов ?

Я пытаюсь отобразить список видео с помощью Html-шаблонов go fiber

Вот мой код перехода (сущность) :

 type Video struct {
    Id          int    `json:"id"`
    Title       string `json:"title"`
    Description string `json:"description"`
    VideoUrl    string `json:"description"`
    Link        string `json:"description"`
}

var videos = []*Video{
    {
        Id:          1,
        Title:       "Podcast #1",
        Description: "Here I discuss about stuff",
        VideoUrl:    "foo.m3u8",
        Link:        "videos/foo",
    },
    {
        Id:          2,
        Title:       "Podcast #2",
        Description: "Still talking",
        VideoUrl:    "bar.m3u8",
        Link:        "videos/bar",
    },
}

Вот мой код перехода (контроллер):

 func main() {
    // Fiber instance
    app := fiber.New(fiber.Config{
        Views: html.New("./views", ".html"),
    })

    // Serve static assets
    app.Static("/", "./public", fiber.Static{
        Compress: true,
    })

    // Routes
    app.Get("/", index)

    // Start server
    log.Fatal(app.Listen(":3000"))
}

// Handler
func index(c *fiber.Ctx) error {
    return c.Render("index", fiber.Map{
        "Videos": videos,
    })
}

Вот мой псевдо HTML :

 <div class="col-lg-4">
    <video-js id={{.Id}} class="vjs-default-skin my-tuby-video" controls preload="auto" width="640" height="268">
    <source src="{{.VideoUrl}}" type="application/x-mpegURL">
    </video-js>
    <script>
    var player = videojs({{.Id}});
    </script>
    
    <h2>{{.Title}}</h2>
    <p>{{.Description}}</p>
    <p><a class="btn btn-secondary" href="#">{{.Link}}</a></p>
</div><!-- /.col-lg-4 -->

Также, как я могу повторить этот фрагмент HTML для каждого видео в моем списке ?

Заранее спасибо за любой вклад.

Комментарии:

1. Я добавил ту часть, где я размещаю видео на карте. Я действительно не уверен в том, что делать дальше.

2. Используйте {{range .Videos}} <insert html shown in question > {{end}} для просмотра видео.

Ответ №1:

Как прокомментировала Сериз Лаймон :

 {{range .Videos}}
<div class="col-lg-4">
    <video-js id={{.Id}} class="vjs-default-skin my-tuby-video" controls preload="auto" width="640" height="268">
    <source src="{{.VideoUrl}}" type="application/x-mpegURL">
    </video-js>
    <script>
    var player = videojs({{.Id}});
    </script>
    
    <h2>{{.Title}}</h2>
    <p>{{.Description}}</p>
    <p><a class="btn btn-secondary" href="#">{{.Link}}</a></p>
</div><!-- /.col-lg-4 -->
{{end}}

Сделал свое дело.

Метки: