Блог

Главная - Вопросы по программированию - Как динамически загружать данные в шаблон?

Как динамически загружать данные в шаблон?

#spring-boot #kotlin #mustache

#весенняя загрузка #kotlin #усы

Вопрос:

У меня есть такая модель, что у меня есть несколько ее экземпляров в списке. Я хочу передать это в свой пользовательский интерфейс и попросить пользовательский интерфейс выяснить, как это нарисовать.

 data class InfoModel(val icon: String, val title: String, val text: String {

}

Контроллер.

 @GetMapping("/index")
fun start(model: Model): String {

    val list = getList()
    model ["list"] = list

    return "index"
}

Теперь в пользовательском интерфейсе я хотел бы, чтобы это было продублировано, но я не знаю как.

 <div class="row">
     <div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
        <div class="media block-6 services d-block text-center">
          <div class="d-flex justify-content-center"><div class="icon color-1 d-flex justify-content-center mb-3"><span class="align-self-center icon-layers"></span></div></div>
          <div class="media-body p-2">
            <h3 class="heading">Title</h3>
            <p>Text here.</p>
          </div>
        </div>      
      </div>
</div>

Что я пробовал, и это ничего не отображает.

 {{#list}}
    <div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
        <div class="media block-6 services d-block text-center">
            <div class="d-flex justify-content-center">
                <div class="icon color-1 d-flex justify-content-center mb-3"><span
                        class="align-self-center icon-{{icon}}"></span></div>
            </div>
            <div class="media-body p-2">
                <h3 class="heading">{{title}}</h3>
                <p>{{text}}</p>
            </div>
        </div>
    </div>
{{/list}}

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

1. scalate.github.io/scalate/documentation/…

2. @JBNizet это отличная ссылка. Не могли бы вы опубликовать это в качестве ответа? Я все еще потерян.

3. Попробуйте что-нибудь. Вы решили использовать Mustache в качестве движка шаблонов. Итак, вам нужно изучить его синтаксис, провести эксперименты. У вас есть непустой список объектов. Вам нужно выполнить итерацию по этому списку и повторить один и тот же раздел для каждого элемента. Точно так же, как в примере, на который я ссылался. Поэтому попробуйте использовать тот же синтаксис и адаптировать его к вашему реальному списку и объектам.

4. ОК. Итак, вы пытаетесь отобразить список с именем «list». И для каждого элемента списка вы пытаетесь отобразить другой список под названием «столбцы». Но внутри InfoModel нет списка именованных столбцов. Все, что у вас есть, это 3 строки. Отбрасывайте {{#columns}} и {{/columns}} .

5. Спасибо @JBNizet! Это очень помогло! Итак, теперь содержимое отображается в стеке. Таким образом, каждый элемент находится друг над другом, когда они должны быть рядом с каждым выходом.

Ответ №1:

Большое спасибо JBNizet за помощь в этом. (Вы должны опубликовать ответ, вы проделали всю тяжелую работу).

 {{#list}}
    <div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
        <div class="media block-6 services d-block text-center">
            <div class="d-flex justify-content-center">
                <div class="icon color-1 d-flex justify-content-center mb-3"><span
                        class="align-self-center icon-{{icon}}"></span></div>
            </div>
            <div class="media-body p-2">
                <h3 class="heading">{{title}}</h3>
                <p>{{text}}</p>
            </div>
        </div>
    </div>
{{/list}}

Ссылка:
https://scalate.github.io/scalate/documentation/mustache.html#Non_Empty_Lists