Как динамически загружать данные в шаблон?
У меня есть эта модель, у меня есть несколько экземпляров в списке. Я хочу передать это в свой пользовательский интерфейс, чтобы пользовательский интерфейс понял, как это нарисовать.
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}}
@JBNizet, это отличная ссылка. Не могли бы вы опубликовать это как ответ? Я все еще потерян.
Попробуйте что-нибудь. Вы решили использовать Mustache в качестве шаблонизатора. Так что вам нужно изучить его синтаксис, провести эксперименты. У вас есть непустой список объектов. Вам нужно перебрать этот список и повторить один и тот же раздел для каждого элемента. Так же, как пример, на который я ссылался. Поэтому попробуйте использовать тот же синтаксис и адаптировать его к вашему реальному списку и объектам.
OK. Итак, вы пытаетесь отобразить список с именем «список». И для каждого элемента списка вы пытаетесь отобразить другой список, называемый «столбцами». Но внутри InfoModel нет именованных столбцов со списком. Все, что у вас есть, это 3 струны. Отбросьте {{#columns}} и {{/columns}}.
Спасибо @JBNizet! Это очень помогло! Итак, теперь содержимое отображается сложенным. Таким образом, каждый элемент находится друг над другом, когда они должны быть рядом друг с другом.
Вы забываете вложенный <div class = "row">
Только что заметил. Эй, большое спасибо! Я очень ценю всю вашу помощь @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