如何在模板上动态加载数据?

时间:2019-04-07 07:22:57

标签: spring-boot kotlin mustache

我有这个模型,我在列表中有它的多个实例。我想将其传递给我的UI,并让UI弄清楚如何绘制。

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 个答案:

答案 0 :(得分:0)

非常感谢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