Mustache Templating adding condition

问题

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

The code is like

<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

I wrote something like this

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

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"

and I put

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

to make it work

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"

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

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

if that slide doesnt have any link the parent li had the class name "noLink" as well

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

Appreciate your help

UPDATE

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

回答1:

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

this way you could have all the data set on your controller and have a json already setted for your template like for example:

{
    "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" }
            ]           
        }   
    ]
}

And use your template like this:

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

In other hand, the negation condition work like this

{
    "slideShow": [
    ]
}

And your template

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

来源：https://stackoverflow.com/questions/53559669/mustache-templating-adding-condition