javascript - If handlebars list is empty, show a message

问题描述

I am using handlebars to show data. I have a ul that filters the data and populates another ul. The filter ul has a couple of choices that currently output an empty ul. I want the empty ul to show a message that says "There are no sessions yet."

I am trying to use handlebars if helper. The problem I am running into is the message is showing up in all ul, even if it is not empty.

<div class="session-details-inner">
        <div class="sidebar left-sidebar left-align">
                    <ul id="session_filter_15308050681959955093" class="session_filters no-list-style">
                        <li>
                            <a class="themelink active" data-filter="All" title="All Tracks">General</a>
                        </li>
                        <li>
                            <a class="themelink" data-filter="Destination Marketers" title="Destination Marketers">Destination Marketers</a>
                        </li>
                        <li>
                            <a class="themelink" data-filter="Exhibitions" title="Exhibitions">Exhibitions</a>
                        </li>
                        <li>
                            <a class="themelink" data-filter="Financials" title="Financials">Financials</a>
                        </li>
                        <li>
                            <a class="themelink" data-filter="Registration" title="Registration">Registration</a>
                        </li>
                        <li>
                            <a class="themelink" data-filter="Technical" title="Technical">Technical</a>
                        </li>
                        <li>
                            <a class="themelink" data-filter="Venues" title="Venues">Venues</a>
                        </li>
                    </ul>
        </div>

        <div class="sidebar right-sidebar left-align">

        <ul class="scheduleday_wrapper themeborder no-list-style">
            {{#each ./Sessions}}

            {{#if TrackDescription.length}}
            <li class="themeborder individual-session accordion-panel" data-track="{{TrackDescription}}">

                <div class="session_content_wrapper expandable accordion">
                    <div class="session_content ">
                        <div class="session_title">
                            <h6>{{Title}}</h6>
                        </div>
                    </div>
                </div>
                <div class="session_content_extend hide session_content_wrapper panel">
                    <div class="session_content ">
                        <div class="session_excerpt">{{SessionDetails}}</div>

                        <div class="session_title_list">
                            <span class="ti-bookmark"></span>
                            <div class="session_title_item">{{TrackDescription}}</div>
                        </div>
                    </div>
                </div>

            </li>
            {{else}}
            <li class="no-sessions">There are no session yet.</li>
            {{/if}}
            {{/each}}
        </ul>

    </div>



<script type='text/javascript'>

$(document).ready(function($) {
        $('.accordion').on('click', function() {
            $parent_box = $(this).closest('.accordion-panel');
            //$parent_box.siblings().find('.panel').slideUp(500);
            $parent_box.siblings().find('.icon').removeClass('down');
            $parent_box.find('.panel').slideToggle(500);
            $parent_box.find('.icon').toggleClass('down');
        });

        $('ul.scheduleday_wrapper li .session_content_wrapper').on('click', function(ev) {
    ev.preventDefault();
    jQuery(this).next().toggleClass('hide');
});

$(".session_filters a").click(function(){

    jQuery(".session_filters a").removeClass("active");
    jQuery(this).addClass("active");
    currentSessionType=jQuery(this).attr("data-filter");
    jQuery(".individual-session").hide();
    jQuery(".individual-session[data-track='"+currentSessionType+"'").show();
    individualSession = jQuery('.individual-session');
    if(currentSessionType == 'All'){
        jQuery(".individual-session").show();
    }
});

});
</script>

标签： javascriptjqueryhtmlhandlebars.js

javascript - If handlebars list is empty, show a message

问题描述

解决方案

推荐阅读