我们什么时候使用Element?我们什么时候使用Helper?我们什么时候使用View Cells?在CakePHP 3中

时间:2015-02-13 07:15:39

标签: cakephp cakephp-3.0

我正在使用CakePHP 3.x

我正在尝试将一个主题森林主题换成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-->

外观如下: enter image description here

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

我应该使用哪种情况进行上述操作?我倾向于帮助者。

1 个答案:

答案 0 :(得分:4)

<强>元素

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

<强>辅助

使用它来封装视图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()调用。您不会使用不打算通过请求访问的方法“污染”您的控制器。

取自上面的链接文章:

  

CakePHP最常用的功能之一是View :: requestAction()。   开发人员经常在他们的应用程序中使用它,导致   在你需要弄清楚你是否在网络中的复杂情况   请求或内部操作请求,混乱的控制器。您   还需要调用一个新的CakePHP请求,这可以添加一些不需要的   开销。

<强>声明

以上反映了我对这些事情的个人观点,没有最终和最终规则如何使用这三件事。目标始终是干净且可重复使用的代码以及关注点的正确分离。如何存档由您自己决定,您有工具。 :)