且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

小胡子模板添加条件

更新时间:2023-12-01 08:04:04

Mustache是​​一个完美的模板引擎,使用它可以呈现页面并将主要逻辑保留在控制器中.

Mustache is a perfect template engine, use it to do the rendering of your page and keep the main logic in your controller.

这样,您可以在控制器上设置所有数据,并已为模板设置了json,例如:

{
    "slideShow": [
        {
            "slideClass":"noLink noDetail",
            "slideImageUrl":"http://myImage1",
            "slideAction":"javascript:void(0)",
            "slideTitle":"slide1",
            "slideDate": "30/11/2018",
            details: [
                { "detail": "detail1" },
                { "detail": "detail2" },
                { "detail": "detail3" }
            ]           
        },
        {
            "slideClass":"",
            "slideImageUrl":"http://myImage2",
            "slideAction":"doAction();",
            "slideTitle":"slide2",
            "slideDate": "30/11/2018",
            details: [
                { "detail": "detail1" },
                { "detail": "detail2" },
                { "detail": "detail3" }
            ]           
        }   
    ]
}

并使用您的模板,如下所示:

{{#slideShow}}
    <li class="{{slideClass"}}">
        <img src="{{slideImageUrl"}}" alt="">
        <a href="{{slideAction}}">
            <h1 class="slideShowTitle">{{slideTitle}}</h1>
            <p class="slideShowDate">{{slideDate}}</p>
            {{#details}}
                <p class="slideShowDetail">{{.}}</p>
            {{/details}}
        </a>
    </li>
{{/slideShow}}

相反,否定条件的工作原理如下

{
    "slideShow": [
    ]
}

还有您的模板

{{^slideShow}}
    <li>
       some html code
    </li>
{{/slideShow}}