Question

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

代码就像

<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，而有些没有 那些没有这个类的人父母李有一个“ noDetail”类

我放

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

使其正常工作

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

对于某些幻灯片，a href也是一个地址，对于某些幻灯片，其是“ javascript：void（0），这意味着该幻灯片不可点击

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

中执行此操作

AND

如果该幻灯片没有任何链接，则父级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}}

小胡子模板添加条件

1 个答案: