小胡子模板添加条件

Question

你好，我是模块化 javascript 编程和模板的新手 并且我使用我以前的幻灯片模块代码构建模板

代码是这样的

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

现在我正在搜索这个大约几个小时

我写了这样的东西

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

我把

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

让它工作

现在的问题是我想说如果该特定幻灯片没有 slideShowDetail 我希望父 li 有类“noDetail”

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

现在我想以某种方式将这个 条件放入我的代码中，如果 slideShow 对象数组对链接没有任何值，则 href 变为“javascript:void” 我想在 我的 HTML 端而不是 js 端的条件

与

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

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

我搜索了很多，没有找到任何东西 我开始怀疑我是否使用了错误的模板系统或方法

感谢您的帮助

更新

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

Answer 1

Mustache 是一个完美的模板引擎，用它来渲染你的页面并将主要逻辑保存在你的控制器中。

这样您就可以在控制器上设置所有数据，并为您的模板设置一个 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}}