小胡子模板添加条件 [英] Mustache Templating adding condition

问题描述

您好，我是模块化javascript编程和模板制作的新手 和Im在我以前的slideShow模块代码中构建模板

Hello Im new to modular javascript programming and templating and Im builiding templates out of my previous code of a slideShow module

代码就像

<section id="slideShow">
    <ul>
        <li>
            <img src="..." alt="">
            <a href="...">
                <h1 class="slideShowTitle">...</h1>
                <p class="slideShowDate">...</p>
                <p class="slideShowDetail">...</p>
            </a>
        </li>
        <li>
            <img src="..." alt="">
            <a href="...">
                <h1 class="slideShowTitle">...</h1>
                <p class="slideShowDate">...</p>
                <p class="slideShowDetail">...</p>
            </a>
        </li>
        <li class="noDetail noLink">
            <img src="..." alt="">
            <a href="javascript:void(0)">
                <h1 class="slideShowTitle">...</h1>
                <p class="slideShowDate">...</p>
            </a>
        </li>
        <li class="noDetail noLink">
            <img src="..." alt="">
            <a href="javascript:void(0)">
                <h1 class="slideShowTitle">...</h1>
                <p class="slideShowDate">...</p>
            </a>
        </li>
        <li class="noDetail">
            <img src="..." alt="">
            <a href="...">
                <h1 class="slideShowTitle">...</h1>
                <p class="slideShowDate">...</p>
            </a>
        </li>
    </ul>
</section>

现在我正在搜索类似的几个小时

now Im searching for this like couple of hours now

我写了这样的东西

<section id="slideShow">
    <ul>
        <script id="slideShowTemplate" type="text/template">
            {{#slideShow}}
                <li class="">
                    <img src="{{.}}" alt="">
                    <a href="{{.}}">
                        <h1 class="slideShowTitle">{{.}}</h1>
                        <p class="slideShowDate">{{.}}</p>
                        {{#slideShowDetail}}
                            <p class="slideShowDetail">{{.}}</p>
                        {{/slideShowDetail}}
                    </a>
                </li>
            {{/slideShow}}
        </script>
    </ul>
</section>

我的主要问题是 如您所见某些列表元素(li)内含p.slideShowDetail，而另一些则没有 没有此类的人父母li的类别为"noDetail"

my main problem is as you see some list elements (li) have p.slideShowDetail inside and some dont the ones that dont have this class the parent li has class "noDetail"

我放

{{#slideShowDetail}}
    <p class="slideShowDetail">{{.}}</p>
{{/slideShowDetail}}

使其正常工作

现在的问题是我要说的是，该特定幻灯片是否没有slideShowDetail，我希望其父级li具有类"noDetail"

now the problem is I want to say if there is no slideShowDetail for that particular slide I want the parent li had the class "noDetail"

对于某些幻灯片，a href是一个地址，对于某些幻灯片，它是"javascript:void(0)，这意味着该幻灯片不可点击

also for some slides the a href is an address and for some it is "javascript:void(0) which means that slide is no clickable

现在我想以某种方式将此条件放入我的代码中，如果slideShow Object数组的链接没有任何值，href变为"javascript:void" 而且我想在我的HTML端中执行此操作，而不是在JS端中的条件

now I want somehow put this condition into my code that if the slideShow Object array doesnt have any value for the link the href become "javascript:void" and I want do this in my HTML side rather than a condition on the js side

AND

如果该幻灯片没有任何链接，则父级li的类别名称也为"noLink"

所以有点像从下到上的条件

so its kinda like Bottom to Top condition

我已经搜索了很多，却没有发现任何东西 我开始怀疑也许我使用了错误的模板系统或方法

Ive searched alot for this and didnt find any thing I started to doubt maybe Im using the wrong template system or methodology

感谢您的帮助

更新

{{#slideShow}}
    <li class="{{^self.link"}}noLink{{^self.link"}} {{^self.detail"}}noDetail{{^self.detail}}">
        <img src="{{.}}" alt="">
        <a href="{{^self.link}} ? {{.}} : javascript:void(0)">
            <h1 class="slideShowTitle">{{.}}</h1>
            <p class="slideShowDate">{{.}}</p>
            {{#self.detail}}
                <p class="slideShowDetail">{{.}}</p>
            {{/self.detail}}
        </a>
    </li>
{{/slideShow}}

推荐答案

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}}

这篇关于小胡子模板添加条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！