Усы Шаблонное добавление условия - PullRequest
Новая
       17

Усы Шаблонное добавление условия

0 голосов
/ 30 ноября 2018

Здравствуйте, я новичок в модульном программировании и шаблонировании javascript, и я создаю шаблоны из моего предыдущего кода модуля 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 внутри, а некоторые нет те, у кого нет этого класса у родителя li есть класс "noDetail"

, и я положил 

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

, чтобы он работал

Теперь проблема в том, что я хочу сказать, что для этого конкретного слайда нет slideShowDetail. Я хочу, чтобы у родительского класса li был класс "noDetail"

также для . Некоторые слайды a href - это адрес, а для некоторыхэто "javascript: void (0) , что означает, что слайд не активен для клика

, теперь я хочу как-то вставить это условие в мой код, если массив объектов слайд-шоу не имеет никакого значения длясвяжи ссылку "javascript: void ", и я хочу сделать это в моей стороне HTML , а не в условии на стороне js

AND

если на этом слайде нет ссылки, родительский ли также имел имя класса "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}}

1 Ответ

0 голосов
/ 30 ноября 2018

Усы - это идеальный шаблонизатор, используйте его для визуализации вашей страницы и сохраните основную логику в вашем контроллере.

таким образом, вы можете иметь все данные, установленные на вашем контроллере, и иметь уже настроенный 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}}
...