如果车把列表为空，则显示一条消息

Question

我正在使用车把来显示数据。我有一个过滤数据并填充另一个 ul 的 ul。过滤器 ul 有几个当前输出空 ul 的选项。我希望空的 ul 显示一条消息 "There are no sessions yet."

如果有帮助，我正在尝试使用车把。我遇到的问题运行是消息显示在所有 ul 中，即使它不是空的。

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

Answer 1

如果你想在没有会话时检查并有条件地渲染，你不应该对你的会话而不是 TrackDescription 进行长度检查吗？

Answer 2

添加了 jQuery 的片段以检查是否所有的 li 都具有 display: none 的样式。如果所有 li 都有 display: none，显示消息 li 否则隐藏消息 li.

if($('.scheduleday_wrapper').children(':visible').length == 0){
    jQuery(".no-sessions").show();
}
else{
    jQuery(".no-sessions").hide();
}

如果车把列表为空，则显示一条消息

If handlebars list is empty, show a message

html

javascript

jquery

handlebars.js