CakePHP 3 - 如何在 View Cell 中设置 CSS / Script 块答案

【问题标题】：CakePHP 3 - How to set CSS / Script block inside a View CellCakePHP 3 - 如何在 View Cell 中设置 CSS / Script 块
【发布时间】：2021-01-22 23:55:58
【问题描述】：

我正在使用 CakePHP 3.9

我正在尝试在我的视图单元中设置 css / 脚本依赖块。

我希望在我的布局头部中获取它，但它不起作用。如果我想让它工作，我必须在调用单元之前/之后在视图中设置 css 依赖项。

有没有办法在 View Cell 中设置 css 依赖项？

我的看法：

<?= $this->cell('Post::post_input'); ?>
....

我的视图单元格：

<?php echo $this->Html->css(['element/post-input'], ['block' => true]);  ?>
<div class="post-input">...</div>

我的布局：

<html>
<head>
...
    <?php
    echo $this->fetch('css');
    echo $this->fetch('script');
    ?>
...
</head>
<body>
    <?php echo $this->fetch('content'); ?>
</body>
</html>

【问题讨论】：

标签： cakephp cakephp-3.x cakephp-helper

【解决方案1】：

它不起作用，因为单元格是一个使用单独视图实例的封闭环境，因此您在其模板中定义的所有块都将驻留在其内部视图中。

来自文档：

单元格模板具有一个独立的范围，与用于呈现当前控制器操作或其他单元格的模板和布局的视图实例不同。因此，他们不知道在操作的模板/布局中进行的任何辅助调用或块设置，反之亦然。

Cookbook > Views > View Cells > Implementing the Cell

如果您不想在使用单元格时手动添加 CSS 块，那么我建议您构建一个可以生成（甚至直接回显）单元格并添加块的自定义助手，类似这样的东西：

<?php
// in src/View/Helper/PostHelper.php

namespace App\View\Helper;

use Cake\View\Helper;

/**
 * @property \Cake\View\Helper\HtmlHelper $Html
 */
class PostHelper extends Helper
{
    protected $helpers = [
        'Html'
    ];

    protected $wasPostInputCssAdded = false;

    public function postInput()
    {
        if (!$this->wasPostInputCssAdded) {
            $this->wasPostInputCssAdded = true;

            $this->Html->css(['element/post-input'], ['block' => true]);
        }

        return $this->_View->cell('Post::post_input');
    }
}

接下来会添加块并回显单元格：

<?= $this->Post->postInput() ?>

另见Cookbook > Views > Helpers > Creating Helpers

【讨论】：

啊谢谢@ndm！！！你在这里真的帮了我！您的帮助示例为我指明了方向！谢谢

【解决方案2】：

另一个不需要重写模板的选项是创建一个使用CellView 类的自定义Cell 类。然后，视图类将单元格内容包装在一个布局中，该布局可以显示块，就像您通常在 Cake 视图/布局模板中所期望的那样。

<?php
declare(strict_types=1);

namespace App\View;

use Cake\View\Cell as BaseCell;
use Cake\View\View;

class Cell extends BaseCell
{
    /**
     * @inheritDoc
     */
    public function createView(?string $viewClass = null): View
    {
        // use custom CellView to for Cells
        return parent::createView(CellView::class);
    }
}

然后是 CellView：

<?php
declare(strict_types=1);

namespace App\View;

class CellView extends AppView
{
    /**
     * @inheritDoc
     */
    public function render(?string $template = null, $layout = null): string
    {
        $cellContents = parent::render($template, $layout);

        // wrap cell contents in "cell" layout
        return $this->renderLayout($cellContents, 'cell');
    }
}

现在所有单元格都使用一个布局，剩下的就是创建一个单元格专用的基本布局：

/templates/layout/cell.php（CakePHP 3：/src/Template/Layout/cell.ctp）

<?php
/**
 * @var CellView $this
 */

use App\View\CellView;

echo $this->fetch('styles');
echo $this->fetch('content');
echo $this->fetch('scripts');

完成这项初步工作后，所有App\View\Cells 都将使用“单元格”布局。我发现从长远来看，如果您使用不同的块或 postLinks 和块，这会更直观。

注意：这里的代码适用于 CakePHP 4，但您需要做的就是使其与 CakePHP 3 兼容，匹配方法签名

【讨论】：