我们什么时候使用元素？我们什么时候使用Helper？我们什么时候使用 View Cells？在 CakePHP 3 中

Question

我正在使用 CakePHP 3.x

我正在尝试将 themeforest 主题蒙皮到 CakePHP 插件中。

中途，我正在决定是否将 portlet 的外观设置为助手、元素或视图单元格。

Portlet html 代码如下所示：

                <!-- BEGIN SAMPLE FORM PORTLET-->
                <div class="portlet box yellow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i> More Form Samples
                        </div>
                        <div class="tools">
                            <a href="" class="collapse">
                            </a>
                            <a href="#portlet-config" data-toggle="modal" class="config">
                            </a>
                            <a href="" class="reload">
                            </a>
                            <a href="" class="remove">
                            </a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Inline Form</h4>
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="exampleInputPassword2">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                            </div>
                            <div class="checkbox">
                                <label>
                                <input type="checkbox"> Remember me </label>
                            </div>
                            <button type="submit" class="btn btn-default">Sign in</button>
                        </form>
                        <hr>
                        <h4>Inline Form With Icons</h4>
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <label class="sr-only" for="exampleInputEmail22">Email address</label>
                                <div class="input-icon">
                                    <i class="fa fa-envelope"></i>
                                    <input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="exampleInputPassword42">Password</label>
                                <div class="input-icon">
                                    <i class="fa fa-user"></i>
                                    <input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
                                </div>
                            </div>
                            <div class="checkbox">
                                <label>
                                <input type="checkbox"> Remember me </label>
                            </div>
                            <button type="submit" class="btn btn-default">Sign in</button>
                        </form>
                        <hr>
                        <h4>Horizontal Form</h4>
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="inputEmail1" class="col-md-2 control-label">Email</label>
                                <div class="col-md-4">
                                    <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword12" class="col-md-2 control-label">Password</label>
                                <div class="col-md-4">
                                    <input type="password" class="form-control" id="inputPassword12" placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-4">
                                    <div class="checkbox">
                                        <label>
                                        <input type="checkbox"> Remember me </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <button type="submit" class="btn blue">Sign in</button>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <h4>Horizontal Form With Icons</h4>
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="inputEmail12" class="col-md-2 control-label">Email</label>
                                <div class="col-md-4">
                                    <div class="input-icon">
                                        <i class="fa fa-envelope"></i>
                                        <input type="email" class="form-control" id="inputEmail12" placeholder="Email">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword1" class="col-md-2 control-label">Password</label>
                                <div class="col-md-4">
                                    <div class="input-icon right">
                                        <i class="fa fa-user"></i>
                                        <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
                                    </div>
                                    <div class="help-block">
                                         with right aligned icon
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-4">
                                    <div class="checkbox">
                                        <label>
                                        <input type="checkbox"> Remember me </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <button type="submit" class="btn green">Sign in</button>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <h4>Column Sizing</h4>
                        <form role="form">
                            <div class="row">
                                <div class="col-md-2">
                                    <input type="text" class="form-control" placeholder=".col-md-2">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" placeholder=".col-md-3">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" placeholder=".col-md-4">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" placeholder=".col-md-2">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- END SAMPLE FORM PORTLET-->

外观是这样的：

我的问题是我们怎么知道什么时候应该使用 Element？我们什么时候应该使用Helper？什么时候应该使用 View Cells？

上面的情况我应该使用哪种情况？我偏向Helper

Answer 1

元素

当您需要重复演示相关内容时使用它，通常 HTML，很多。例如，我有一个项目，其中三个 table 使用地址 table 的记录。这三个包含地址数据的表单部分都是一个元素。

帮手

用它来封装view logik，尽可能不要把HTML放在里面或者其他表现相关的东西。例如，让它做一些事情，根据结果，您可以使用该结果类型的元素来呈现数据：return $this->_view->render('items/' . $type . '_item');

如果您查看核心帮助程序，例如 HtmlHelper，您会看到属性 $_defaultConfig:

protected $_defaultConfig = [
    'templates' => [
    'meta' => '<meta{{attrs}}/>',
    'metalink' => '<link href="{{url}}"{{attrs}}/>',
    /*...*/

这些是用于生成 HTML 输出的模板字符串。这将标记与生成它的实际代码很好地分开了。也看看 FormHelper，它使用小部件来呈现更复杂的输出。

所以这适用于像标记片段这样的元素。根据经验，我会说，如果您的标记比您在那里看到的要长，请将其作为一个元素并从帮助程序中调用它或将其作为一个小部件。

查看单元格

将视图单元视为 "Mini MVC" 具有视图并可以加载多个模型的堆栈。恕我直言，如果您熟悉它们，它们类似于 AngularJS 指令。 See this article for an example. 我真的建议您阅读它，它详细解释了它们及其用例。

我还没有对它们做太多，但是它们可以用来替换 requestAction() 调用等。您不会 "pollute" 您的控制器使用不打算通过请求访问的方法。

摘自上面的链接文章：

One of the most ill-used features of CakePHP is View::requestAction(). Developers frequently use this all over their applications, causing convoluted cases where you need to figure out if you are within a web request or an internal action request, cluttering controllers. You also need to invoke a new CakePHP request, which can add some unneeded overhead.

免责声明

以上反映了我个人对这些东西的看法，你必须如何使用这三个东西并没有最终的和最终的规则。目标始终是干净且可重用的代码以及适当的关注点分离。如何归档取决于您，您已经拥有了工具。 :)

我们什么时候使用元素？我们什么时候使用Helper？我们什么时候使用 View Cells？在 CakePHP 3 中

When do we use Element? When do we use Helper? When do we use View Cells? in CakePHP 3

cakephp

cakephp-3.0