时间戳

首页 > 解决方案 > 小胡子模板添加条件

javascript - 小胡子模板添加条件

问题描述

你好，我是模块化 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}}

标签： javascripthtmltemplatesmodulemustache

解决方案

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

推荐阅读