请知悉:本文最近一次更新为 8年 前,文中内容可能已经过时。

本节对应书里的The view component。
原文翻译整理如下:

此组件用于呈现我们的模板。默认情况下,模板具有.phtml扩展名,它们包含HTML和PHP代码。 以下是一些如何使用view组件的示例:
1.首先,我们使用以下代码片段在DI中设置view组件:

<?php
$di['view'] = function () use ($config) {
$view = PhaconMvcView();
// Assuming that we hold our views directory in the configuration file
$view->setViewsDir($config->view->dir);
return $view;
};

2.现在,我们可以按下面的代码来使用此服务:

<?php
class PostControler extends PhalconMvcController
{
public function listAction()
{
// Retrieve posts from DB
$posts = Post:find();
$this->view->setVar('pageTitle', 'Posts');
$this->view->setVar('posts', $posts);
}
}

3.接下来,我们需要创建一个view(视图)模板,它必须如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $pageTitle; </title>
</head>
<body>
<?php foreach($posts as $post) {
<p><?php echo $post->getPostTitle(); </p>
<p><?php echo $post->getPostContent(); </p>
<?php }
</body>
</html>

很简单,不是吗? 此组件还支持分层渲染。您可以有基本布局,列表页(posts)的一般模板和单个文章(post)的模板。 让我们举个例子,看下面的目录结构:

app/views/
- index.phtml
- post/detail.phtml

Phalcon将首先呈现app/views/index.phtml。然后,当我们从post控制器请求detailAction()时,它将渲染app/views/post/details.phtml。 主布局可以包含类似于以下代码的东西:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning Phalcon</title>
</head>
<body>
<?php echo $this->getContent();
</body>
</html>

并且,details.phtml模板将具有以下内容:

<?php foreach($posts as $post) { 
<p><?php echo $post->getPostTitle(); </p>
<p><?php echo $post->getPostContent(); </p>
<?php }

此组件还允许您选择不同的模板来设置渲染级别,禁用或启用视图等等。
Phalcon有一个名为Volt的内置模板引擎。 如果您熟悉PHP模板引擎(如Smarty或Twig),您肯定会用它。 Volt几乎与Twig相同,你会发现它非常有用 – 它的灵感来源于Jinja(https://jinja.pocoo.org/)。 你也可以使用自己的模板引擎,或任何你能找到的其他模板引擎。
为了启用Volt模板引擎,我们需要对我们的视图服务进行一个小的修改,我们需要创建一个Volt服务; 下面代码展示了如何做到这一点:

<?php
$di['voltService'] = function($view, $di) use ($config) {
$volt = new PhalconMvcViewEngineVolt($view, $di);
if (!is_dir($config->view->cache->dir)) {
mkdir($config->view->cache->dir);
}
$volt->setOptions(array(
"compiledPath" => $config->view->cache->dir,
"compiledExtension" => ".compiled",
"compileAlways" => false
));
$compiler = $volt->getCompiler();
return $volt;
};
// First, we setup the view in the DI
$di['view'] = function () use ($config) {
$view = PhaconMvcView();
$view->setViewsDir($config->view->dir);
$view->registerEngines(array(
'.volt' => 'voltService'
));
return $view;
};

通过修改和添加voltService,我们现在可以使用这个模板引擎。从继承的角度来看,Volt的行为略有不同。我们首先需要以一个命名好的块来定义一个主布局。然后,其余的模板应该引用主布局,我们需要将我们的内容放在与主布局相同的命名块中。 在看一些例子之前,我会告诉你一点关于Volt的语法,细节如下。
用于输出数据或回显内容的语法:

{{ my_content }}

定义块的语法:

{% block body %} Content here {% endblock %}

引用模板的语法(这应该是模板中的第一行):

{% extends 'layouts/main.volt' %}

包含文件的语法:

{% include 'common/sidebar.volt' %}

包含文件并传递变量的语法:

{% include 'common/sidebar' with{'section':'homepage'} %}

请注意缺少的扩展名。 如果传递变量,您必须省略扩展名。
控制结构的语法(for,if,else):

{% for post in posts %}
{% if post.getCategorySlug() == 'entertainment' %}
<h3 class="pink">{{ post.getPostTitle() }}</h3>
{% else %}
<h3 class="normal">{{ post.getPostTitle() }}</h3>
{% endif %}
{% endfor %}

循环上下文的语法:

{% for post in posts %}
{% if loop.first %}
<h1>{{ post.getPostTitle() }}</h1>
{% endif %}
{% endif %}

赋值给变量的语法:

{% set title = 'Learning Phalcon' %}
{% set cars = ['BMW', 'Mercedes', 'Audi'] %}

列表很长。此外,您可以使用表达式,比较运算符,逻辑运算符,过滤器等。 让我们写一个简单的模板来看看它是如何工作的:

<!-- app/views/index.volt -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block pageTitle %}Learning Phalcon{% endblock%}</title>
</head>
<body>
<div class='header'>{% block header %}Main layout header{%
endblock%}</div>
<div class='content'>{% block content %}This is the main layout
content{% endblock %}</div>
</body>
</html>
<!-- app/views/post/detail.volt
{% extends 'index.volt' %}
{% block pageTitle %}
{{ post.getPostTitle() }}
{% endblock %}
{% block header %}
Post layout
{% endblock %}
{% block content %}
<p>{{ post.getPostContent() }}</p>
{% endblock%}

你可以访问 https://docs.phalconphp.com/en/latest/reference/views.html 查看官方文档关于view组件的说明,访问https://docs.phalconphp.com/en/latest/reference/volt.html 可以查看官方文档关于volt模板引擎的说明。


如您从本文得到了有价值的信息或帮助,请考虑扫描文末二维码捐赠和鼓励。

尊重他人劳动成果。转载请务必附上原文链接,我将感激不尽。


与《零基础学Phalcon 11 view 组件》相关的博文:


留言

avatar
😀
😀😁😂😅😭🤭😋😘🤔😰😱🤪💪👍👎🤝🌹👌