渲染 blade 模板基于 Javascript 条件

Question

我有

一个帐户 > 带有 table 和其他模式的索引页面，我将其切成小的 blade 视图。在该页面上，我有 100000 个帐户。

问题

在我的编辑模式顶部有一个 PHP 部分正在发出 100000 个 curls 请求，并导致我的帐户 > 索引页面出现巨大延迟。

我的目标

是为了防止在前面渲染那些 blade，并且仅在用户单击铅笔图标时才渲染。

这是我的account.indexblade

@extends('layouts.internal.master')
    @section('content')

    

    <div class="panel account-panel" style="padding: 30px;">
      <div class="panel-body">
    
       
        <div class="col-sm-2">
          <a id="account-create" class="btn btn-success btn-block mb20" data-toggle="modal" data-target=".account-create">Create</a>
        </div>
    
        <div class="table-responsive" style="margin-bottom: 0;">
          <table class="table" id="account-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Account ID</th>
                <th>Customer Type</th>
                <th>Name</th>
                <th>Email</th>
                <th class="text-center">Auto Provisioning</th>
                <th class="text-center">AP</th>
                <th style="min-width: 90px;">Action</th>
              </tr>
            </thead>
            <tbody>
    
              <?php
              $x = 0;
    
              ?>
              @foreach( $accounts as $account )
    
              @if($account->email_address !== 'admin@benunets.com')
          
              <tr>
                <td>{{$x += 1 }}</td>
                <td><a href="/account/{!! $account->account_id !!}">{!! $account->account_id !!}</a></td>
                <td>
    
                {{-- <img src="{{ $image }}" width="30px"> --}}
    
                <span class="badge" style="background-color: {{ $color2 }}">{!! $customer_type !!}</span></td>
                <td>{!! ucfirst($account->first_name) !!} {!! ucfirst($account->last_name) !!}</td>
                <td>{!! $account->email_address !!}</td>
                <td class="text-center" >
    
                  @if($user != null AND $user->auto_provisioning == 1)
                  {!! Helper::intBoolToIcon($user->auto_provisioning) !!}
                  @else
                  <i title="false" style="font-size: 18px; color: #F44336" class="fa fa-times"></i>
                  @endif
    
                </td>
                <td class="text-center" ><b>{!! $count_cpe !!}</b></td>
                <td class="text-center">
    
                  <!-- Buttons -->
                  <div class="tool-buttons">
                    <ul class="button-list">
    
                      <!-- Edit -->
                      <li><a data-toggle="modal" data-target=".account-edit-{!! $account->account_id !!}" class="tooltips account-edit" data-id="{!! $account->account_id !!}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a></li>
    
                      <!-- Delete -->
                      <li><a data-toggle="modal" data-target=".account-destroy-{!! $account->account_id !!}" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a></li>
                    </ul>
                  </div>
    
                </td>
              </tr>
    
              @endif
              @endforeach
    
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
    @include('account.modal.account.destroy')
    @include('account.modal.account.create')
    @include('account.modal.account.edit')


@section('pagescripts')

<script type="text/javascript">


  /*=============================================================================================
  =            Edit            =
  ============================*/


  //Edit Mode
  $('.account-edit').click( function() {


    var id = $(this).data("id");
    console.log(id);

    //Style
    var val2 = $("#auto_provisioning_switch-"+id).val();

    //Set the AP switch
    if(val2 == 1){
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', true);
      $("[name='auto_provisioning_switch']").val(1);
      $('#service_plan_div-'+id).show();

      // Set the service plan dd menu
      var ajax = $.ajax({url: '/api/account/'+id+'/service_plan'});
      ajax.done(function (service_plan) {
        console.log(service_plan+' | id : ' + id );
        $('#service_plan-'+id).val(service_plan);
        });

    }else{
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', false);
      $("[name='auto_provisioning_switch']").val(0);
      $('#service_plan_div-'+id).hide();
    }

    
  });

  




</script>

@stop

我只想渲染

@include('account.modal.account.edit')

当我单击铅笔进行编辑时。

或

@include('account.modal.account.destroy')

当我点击 垃圾箱 进行删除时。

我该怎么做？

关于如何防止这种情况的任何提示都将是一个巨大的帮助！！！

Answer 1

您不能使用 javascript 代码更改 blade 渲染，因为 blade 渲染正在您的服务器上进行，而 javascript 正在您的服务器上进行浏览器。

您可以做的是添加 javascript 以在用户与您的页面交互时隐藏这些部分。

Show or hide an element using javascript in all browsers

渲染 blade 模板基于 Javascript 条件

Rendering blade template base on Javascript Condition

javascript

php

laravel

blade

laravel-5

我有

问题

我的目标

或