Laravel - 如何优化刀片视图中的相同循环答案

【问题标题】：Laravel - How to optimize identical loops in blade viewsLaravel - 如何优化刀片视图中的相同循环
【发布时间】：2020-10-07 12:35:15
【问题描述】：

我创建了一个 Laravel Web 应用程序，在它的视图内我需要有相同的刀片开关循环 3 次，它占用了大量空间重复相同的东西。有没有办法优化这个？
我尝试使用包含这些刀片开关盒的不同blade.php 文件，然后在主视图中生成它，但是这不起作用，大概是因为主视图本身扩展了一个layout.blade.php 文件。

代码示例

这里发生了什么：

我正在使用天气 API 来拉取数据，这些数据正在通过控制器导入到视图中。为了格式化最终结果，需要许多相同的 switch case，类似于下面的一个。与视图所需的其余行相比，这些 switch case 太长了，所以我正在寻找一种方法来清理它。

@extends('layout')

@section('middle')
        <div id="middle-results">
        @switch($results['weather']['0']['icon'])
            @case("01d")
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                <g id="Base" display="none">
                </g>
                <g id="Dibujo">
                    <path d="M62.142,35.858c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829c0.781-0.781,0.781-2.047,0-2.828
                        c-0.781-0.781-2.048-0.781-2.828,0l-2.829,2.829c-0.781,0.781-0.781,2.047,0,2.828C61.118,35.663,61.63,35.858,62.142,35.858z
                        M30,48c0-1.104-0.896-2-2-2h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4C29.104,50,30,49.104,30,48z M32.444,60.728l-2.829,2.829
                        c-0.781,0.781-0.781,2.047,0,2.828c0.39,0.391,0.902,0.586,1.414,0.586c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829
                        c0.781-0.781,0.781-2.047,0-2.828C34.492,59.947,33.224,59.947,32.444,60.728z M32.444,35.272c0.39,0.391,0.902,0.586,1.414,0.586
                        s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828l-2.829-2.829c-0.78-0.781-2.048-0.781-2.828,0
                        c-0.781,0.781-0.781,2.047,0,2.828L32.444,35.272z M48,30c1.104,0,2-0.896,2-2v-4c0-1.104-0.896-2-2-2s-2,0.896-2,2v4
                        C46,29.104,46.896,30,48,30z M72,46h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4c1.104,0,2-0.896,2-2S73.104,46,72,46z M63.556,60.728
                        c-0.78-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828l2.829,2.829c0.39,0.391,0.902,0.586,1.414,0.586
                        c0.512,0,1.023-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L63.556,60.728z M48,66c-1.104,0-2,0.896-2,2v4
                        c0,1.104,0.896,2,2,2s2-0.896,2-2v-4C50,66.896,49.104,66,48,66z M48,34c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14
                        S55.72,34,48,34z M48,58c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10S53.514,58,48,58z"/>
                </g>
                </svg>
                @break
            @case("01n")
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                <g id="Base" display="none">
                </g>
                <g id="Dibujo">
                    <path d="M60,46c-5.514,0-10-4.486-10-10c0-1.104-0.896-2-2-2c-7.72,0-14,6.28-14,14s6.28,14,14,14c7.72,0,14-6.28,14-14
                        C62,46.896,61.104,46,60,46z M48,58c-5.514,0-10-4.486-10-10c0-4.888,3.525-8.969,8.168-9.832
                        c0.934,5.986,5.677,10.729,11.664,11.664C56.969,54.475,52.889,58,48,58z"/>
                </g>
                </svg>
                @break

        @default

    @endswitch
@endsection

我试过但没用

3 个文件：

文件 1： layout.blade.php

包含主页面结构

<!DOCTYPE html>

<html>
    <head>
    </head>

    <body>
        @yield('middle')
    </body>
</html>

文件 2： results.blade.php

包含结果页面的视图，其中数据显示给客户端

@extends('layout')
@extends('icons_switch')

@section('middle')
    <div id="middle-results">
        @yield('icon')
    </div>
@endsection

文件 3： icons_switch.blade.php

包含选择正确图标的开关盒，如下所示

        @section('icon')
            @switch($results['weather']['0']['icon'])
                @case("01d")
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                    viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                    <g id="Base" display="none">
                    </g>
                    <g id="Dibujo">
                        <path d="M62.142,35.858c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829c0.781-0.781,0.781-2.047,0-2.828
                            c-0.781-0.781-2.048-0.781-2.828,0l-2.829,2.829c-0.781,0.781-0.781,2.047,0,2.828C61.118,35.663,61.63,35.858,62.142,35.858z
                            M30,48c0-1.104-0.896-2-2-2h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4C29.104,50,30,49.104,30,48z M32.444,60.728l-2.829,2.829
                            c-0.781,0.781-0.781,2.047,0,2.828c0.39,0.391,0.902,0.586,1.414,0.586c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829
                            c0.781-0.781,0.781-2.047,0-2.828C34.492,59.947,33.224,59.947,32.444,60.728z M32.444,35.272c0.39,0.391,0.902,0.586,1.414,0.586
                            s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828l-2.829-2.829c-0.78-0.781-2.048-0.781-2.828,0
                            c-0.781,0.781-0.781,2.047,0,2.828L32.444,35.272z M48,30c1.104,0,2-0.896,2-2v-4c0-1.104-0.896-2-2-2s-2,0.896-2,2v4
                            C46,29.104,46.896,30,48,30z M72,46h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4c1.104,0,2-0.896,2-2S73.104,46,72,46z M63.556,60.728
                            c-0.78-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828l2.829,2.829c0.39,0.391,0.902,0.586,1.414,0.586
                            c0.512,0,1.023-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L63.556,60.728z M48,66c-1.104,0-2,0.896-2,2v4
                            c0,1.104,0.896,2,2,2s2-0.896,2-2v-4C50,66.896,49.104,66,48,66z M48,34c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14
                            S55.72,34,48,34z M48,58c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10S53.514,58,48,58z"/>
                    </g>
                    </svg>
                    @break
                @case("01n")
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                    viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                    <g id="Base" display="none">
                    </g>
                    <g id="Dibujo">
                        <path d="M60,46c-5.514,0-10-4.486-10-10c0-1.104-0.896-2-2-2c-7.72,0-14,6.28-14,14s6.28,14,14,14c7.72,0,14-6.28,14-14
                            C62,46.896,61.104,46,60,46z M48,58c-5.514,0-10-4.486-10-10c0-4.888,3.525-8.969,8.168-9.832
                            c0.934,5.986,5.677,10.729,11.664,11.664C56.969,54.475,52.889,58,48,58z"/>
                    </g>
                    </svg>
                    @break
                 @default
             @endswitch
         @endsection

【问题讨论】：

请更新您的问题并包含您尝试过的代码；如果你不展示你所做的事情，人们就很难提供帮助。您可能需要使用@include() 而不是@yield()，但我猜，因为您没有发布任何代码:)
感谢您的建议，我已更新以提供示例代码:)
提供此I tried using a different blade.php file which contains these blade switch cases, and then yield it inside the main view,的相关代码
嗨，我也添加了该代码

标签： php laravel laravel-blade

【解决方案1】：

您应该通过Components 包含它或检查刀片文件是否存在。通过这种方式，您可以管理要为用户提供的图标。

@extends('layout')

@section('middle')
    <div id="middle-results">
        @includeIf('icons.' . $results['weather']['0']['icon'])
    </div>
@endsection

在您的resources/views/icons/01d.blade.php 中

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<g id="Base" display="none">
</g>
<g id="Dibujo">
    <path d="M62.142,35.858c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829c0.781-0.781,0.781-2.047,0-2.828
        c-0.781-0.781-2.048-0.781-2.828,0l-2.829,2.829c-0.781,0.781-0.781,2.047,0,2.828C61.118,35.663,61.63,35.858,62.142,35.858z
        M30,48c0-1.104-0.896-2-2-2h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4C29.104,50,30,49.104,30,48z M32.444,60.728l-2.829,2.829
        c-0.781,0.781-0.781,2.047,0,2.828c0.39,0.391,0.902,0.586,1.414,0.586c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829
        c0.781-0.781,0.781-2.047,0-2.828C34.492,59.947,33.224,59.947,32.444,60.728z M32.444,35.272c0.39,0.391,0.902,0.586,1.414,0.586
        s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828l-2.829-2.829c-0.78-0.781-2.048-0.781-2.828,0
        c-0.781,0.781-0.781,2.047,0,2.828L32.444,35.272z M48,30c1.104,0,2-0.896,2-2v-4c0-1.104-0.896-2-2-2s-2,0.896-2,2v4
        C46,29.104,46.896,30,48,30z M72,46h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4c1.104,0,2-0.896,2-2S73.104,46,72,46z M63.556,60.728
        c-0.78-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828l2.829,2.829c0.39,0.391,0.902,0.586,1.414,0.586
        c0.512,0,1.023-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L63.556,60.728z M48,66c-1.104,0-2,0.896-2,2v4
        c0,1.104,0.896,2,2,2s2-0.896,2-2v-4C50,66.896,49.104,66,48,66z M48,34c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14
        S55.72,34,48,34z M48,58c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10S53.514,58,48,58z"/>
</g>
</svg>

【讨论】：

嗨，非常感谢这个答案，它成功了，我设法替换了大块的 HTML 代码！对于任何对有关“@includeIf”和“@include”的子视图进一步感兴趣的人，我留下 Laravel 的文档链接here