空容器输出消息与小胡子模板

时间:2019-02-20 08:32:27

标签: jquery laravel-5.4 mustache

如果容器为空,如何放置输出消息?这是小胡子模板的代码:

<script id="matches" type="text/template">
<div class="matchmain">
    <div class="infor">
        <div class="time">
                @{{#ongoing}}
                    <span style="color: #72A326; text-shadow: 1px 1px 0px #4A7010; font-weight: bold; font-size: 16px">&nbsp;LIVE</span>
                @{{/ongoing}}
                @{{#open}}
                   <strong class="match_countdown" data-schedule="@{{formatted_schedule}}">
                   @{{formatted_schedule}}</strong>
                @{{/open}}
            </div>
        <div class="series">@{{league.name}}</div>
    </div>
        @{{#is_current}}
        <div class="match " style="background-image: url({{url('/public_image')}}/@{{league.image}})">
        @{{/is_current}}
        @{{^is_current}}
        <div class="match " style="background-image: url({{url('/public_image')}}/@{{league.image}})">
        @{{/is_current}}
        @{{#label}}
        <div class="col-sm-10" style="text-align: center; font-weight: bold;"><span class="matchLabel">@{{label}}</span></div>
        @{{/label}}
        <div class="col-sm-10 matchleft">
            <a href="{{url('/')}}/match/@{{id}}">
                <div style="width: 45%; float: left; text-align: right">
                    <img class="team2_img" src="{{url('/')}}/@{{team_a.image}}" style="float: right;border-radius: 2px;" />
                    @{{#team_a_winner}}
                    <img src="{{asset('images/won.png')}}" style="position: absolute; margin: -10px 0 0 -15px;">
                    @{{/team_a_winner}}
                    <div class="teamtext">
                        <b style="font-size: 0.9vw">@{{team_a.name}}</b><br>
                        <i class="percent-coins">@{{teama_percentage}}%</i>
                    </div>
                </div>
                <div class="vs_div" style="float: left; text-align: center; margin-top: 0.6em">
                    <span class="format" style="background: #fff;">@{{best_of}}</span><br><span style="background: #fff;">vs</span>
                </div>
                <div style="width: 45%; float: left; text-align: left">
                    <img class="team2_img" src="{{url('/')}}/@{{team_b.image}}" style="float: left;border-radius: 2px;" />
                    @{{#team_b_winner}}
                    <img src="{{asset('images/won.png')}}" style="position: absolute; margin: -10px 0 0 -15px;">
                    @{{/team_b_winner}}
                    <div class="teamtext">
                        <b style="font-size: 0.8vw">@{{team_b.name}}</b><br>
                        <i class="percent-coins">@{{teamb_percentage}}%</i>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

这是jquery的代码:

$('.categorybtn').click(function(){
        var $btn = $(this);
        $btn.button('loading');
        var categ = $(this).attr('id');
        var currIndex = $('#matchesHolder .matchmain:last').index();
        var container = $("#matches").html();
        var url = "";
        console.log(categ);
        switch(categ){
            case 'loadAll':
                $("#loadAllMore").data('pointer',0);
                url = "{{url('/match/loadAll')}}/" + $btn.data('pointer')
                break;
            case 'loadDota':
                $("#loadDotaMore").data('pointer',0);
                url = "{{url('/match/dota2')}}/" + $btn.data('pointer')
                break;
            case 'loadCsgo':
                $("#loadCsgoMore").data('pointer',0);
                url = "{{url('/match/csgo')}}/" + $btn.data('pointer')
                break;
            case 'loadSports':
                $("#loadSportsMore").data('pointer',0);
                url = "{{url('/match/sports')}}/" + $btn.data('pointer')
                break;
        }
        $.get(url)
        .done(function(data) {
            $btn.button('reset');
            $new_contents = '';
            $.each(data.matches, function() {
                var match = this;
                switch(this.status){
                    case 'open':
                        match.open = true;
                        break;
                    case 'ongoing':
                        match.ongoing = true;
                        break;
                }
                match.formatted_schedule = moment().format(this.schedule);
                $new_contents += Mustache.render(container, this);
            });
            if($btn.data('pointer') == 0){
            $('#matchesHolder').html($new_contents);
            }
            else{
            $('#matchesHolder').append($new_contents);
            }
            $btn.data('pointer', data.pointer);
            $.each($('.match_countdown'), function(key, index) {
                countdown(this, $(this).data('schedule'));
            });
        });
     });

这是dota 2的索引控制器的代码。

 public function dota2index($ptr)
{
    $leagues = \App\League::active()->orderby('leagues.status','desc')->orderBy('created_at','desc')->get()->load('teams.bets');
    $_matches = \App\Match::mainMatches()->where('leagues.type','=','dota2')->get()->load('league','teamA', 'teamB')->sortByDesc('schedule')->slice($ptr, 100);
    $dotaresult = \App\Match::mainMatches()->where('leagues.type','=','dota2')->whereIn('matches.status',['open','ongoing'])->first();
    $liveList = collect();
    $openList = collect();
    $oldList = collect();
    foreach ($_matches as $_m) {
        $_m->teama_percentage = number_format($_m->teamA->matchWinPercentage($_m->id), 2);
        $_m->teamb_percentage = number_format($_m->teamB->matchWinPercentage($_m->id), 2);
        if ($_m->schedule->isFuture()) {
            if($_m->status == 'ongoing')
                $liveList->push($_m);
            else if($_m->status == 'open')
                $openList->push($_m);
            else
                $oldList->push($_m);
        } else {
            if ($_m->status == 'ongoing')
                $liveList->push($_m);
            else if($_m->status == 'open')
                $openList->push($_m);
            else
                $oldList->push($_m);
        }
    }
    $_liveList = $liveList->sortBy('schedule');
    $dotamatches = $_liveList->merge($openList->sortBy('schedule'));
    if($dotaresult == null){
        return [
            'status' => ['No Matches available']
    ];
    }
    else
    return [
        'matches' => $dotamatches,
        'pointer' => $ptr
    ];//view('dota2', compact('teams', 'dotamatches', 'leagues'));

}

我添加了一个“ $ dota2result” if语句,它在console.log中是成功的,但是我在如何在模板上显示它上遇到了麻烦。

因此,基本上一切正常,唯一缺少的是,如果每个选项卡都没有匹配项,它将显示“没有匹配项”。既然只有1个容器,该如何实现?谢谢!

0 个答案:

没有答案