使用視圖（Using Views） · phalcon框架

視圖代表了應用程序中的用戶界面. 視圖通常是在 HTML 文件里嵌入 PHP 代碼，這些代碼僅僅是用來展示數據。視圖的任務是當應用程序發生請求時，提供數據給 web 瀏覽器或者其他工具。 Phalcon\Mvc\View 和 Phalcon\Mvc\View\Simple 負責管理你的MVC應用程序的視圖(View)層。 #### 集成視圖到控制器（Integrating Views with Controllers）當某個控制器已經完成了它的周期，Phalcon自動將執行傳遞到視圖組件。視圖組件將在視圖文件夾中尋找一個文件夾名與最后一個控制器名相同,文件命名與最后一個動作相同的文件執行。例如，如果請求的URL http://127.0.0.1/blog/posts/show/301, Phalcon將如下所示的方式按解析URL: | Server Address | 127.0.0.1 | | --- | --- | | Phalcon Directory | blog | | Controller | posts | | Action | show | | Parameter |301 | 調度程序將尋找一個“PostsController”控制器及其“showAction”動作。對于這個示例的一個簡單的控制器文件： ~~~ <?php use Phalcon\Mvc\Controller; class PostsController extends Controller { public function indexAction() { } public function showAction($postId) { // Pass the $postId parameter to the view $this->view->postId = $postId; } } ~~~ setVar允許我們創建視圖變量，這樣可以在視圖模板中使用它們。上面的示例演示了如何傳遞 `$postId` 參數到相應的視圖模板。 #### 分層渲染（Hierarchical Rendering） Phalcon\Mvc\View 支持文件的層次結構，在Phalcon中是默認的視圖渲染組件。這個層次結構允許通用的布局點(常用的視圖)和以控制器命名的文件夾中定義各自的視圖模板該組件使用默認PHP本身作為模板引擎，因此視圖應該以.phtml作為拓展名。如果視圖目錄是 app/views ，視圖組件會自動找到這三個視圖文件。 | 名稱 | 文件 | 解釋 | | --- | --- | --- | | Action View | app/views/posts/show.phtml | 這是該動作相關的視圖。它只會在執行 “show” 動作時顯示。 | | Controller Layout | app/views/layouts/posts.phtml | 這是該控制器相關的視圖。它只會 “posts” 控制器內每個動作執行時顯示。這個控制器的所有動作將重用這個布局的全部代碼。 | | Main Layout | app/views/index.phtml | 這是主布局，它將在應用程序的每個控制器或動作執行時顯示。 | 你不需要實現上面提到的所有文件。在文件的層次結構中 Phalcon\Mvc\View 將簡單地移動到下一個視圖級別。如果這三個視圖文件被實現，他們將被按下面方式處理: ~~~  <h3>This is show view!</h3> <p>I have received the parameter <?php echo $postId; ?></p> ~~~ ~~~  <h2>This is the "posts" controller layout!</h2> <?php echo $this->getContent(); ?> ~~~ ~~~  <html> <head> <title>Example</title> </head> <body> <h1>This is main layout!</h1> <?php echo $this->getContent(); ?> </body> </html> ~~~ 注意方法 `$this->getContent()` 被調用的這行。這種方法指示 Phalcon\Mvc\View 在這里注入前面視圖層次結構執行的內容。在上面的示例中，輸出將會是： ![](http://www.iphalcon.cn/_images/views-1.png) 請求生成的HTML的將為： ~~~  <html> <head> <title>Example</title> </head> <body> <h1>This is main layout!</h1>  <h2>This is the "posts" controller layout!</h2>  <h3>This is show view!</h3> <p>I have received the parameter 101</p> </body> </html> ~~~ #### 使用模版（Using Templates）模板視圖可以用來分享共同的視圖代碼。他們作為控制器的布局，所以你需要放在布局目錄。模板視圖可以在布局之前渲染(使用 $this->view->setTemplateBefore() 方法) ，也可以布局之后渲染(使用 this->view->setTemplateAfter() 方法)。下面的例子中，模板視圖(layouts/common.phtml)是在布局(layouts/posts.phtml)之后渲染的: ~~~ <?php use Phalcon\Mvc\Controller; class PostsController extends Controller { public function initialize() { $this->view->setTemplateAfter("common"); } public function lastAction() { $this->flash->notice( "These are the latest posts" ); } } ~~~ ~~~  <!DOCTYPE html> <html> <head> <title>Blog's title</title> </head> <body> <?php echo $this->getContent(); ?> </body> </html> ~~~ ~~~  <ul class="menu"> <li><a href="/">Home</a></li> <li><a href="/articles">Articles</a></li> <li><a href="/contact">Contact us</a></li> </ul> <div class="content"><?php echo $this->getContent(); ?></div> ~~~ ~~~  <h1>Blog Title</h1> <?php echo $this->getContent(); ?> ~~~ ~~~  <article> <h2>This is a title</h2> <p>This is the post content</p> </article> <article> <h2>This is another title</h2> <p>This is another post content</p> </article> ~~~ 最終的輸出如下: ~~~  <!DOCTYPE html> <html> <head> <title>Blog's title</title> </head> <body>  <ul class="menu"> <li><a href="/">Home</a></li> <li><a href="/articles">Articles</a></li> <li><a href="/contact">Contact us</a></li> </ul> <div class="content">  <h1>Blog Title</h1>  <article> <h2>This is a title</h2> <p>This is the post content</p> </article> <article> <h2>This is another title</h2> <p>This is another post content</p> </article> </div> </body> </html> ~~~ 如果我們調用 `$this->view->setTemplateBefore("common")` 方法, 最終輸出如下: ~~~  <!DOCTYPE html> <html> <head> <title>Blog's title</title> </head> <body>  <h1>Blog Title</h1>  <ul class="menu"> <li><a href="/">Home</a></li> <li><a href="/articles">Articles</a></li> <li><a href="/contact">Contact us</a></li> </ul> <div class="content">  <article> <h2>This is a title</h2> <p>This is the post content</p> </article> <article> <h2>This is another title</h2> <p>This is another post content</p> </article> </div> </body> </html> ~~~ #### 渲染級別控制（Control Rendering Levels）如上所述，Phalcon\Mvc\View 支持視圖分層。你可能需要控制視圖組件的渲染級別。方法 `Phalcon\Mvc\View::setRenderLevel()` 提供這個功能。這種方法可以從控制器調用或是從上級視圖層干涉渲染過程。 ~~~ <?php use Phalcon\Mvc\View; use Phalcon\Mvc\Controller; class PostsController extends Controller { public function indexAction() { } public function findAction() { // This is an Ajax response so it doesn't generate any kind of view $this->view->setRenderLevel( View::LEVEL_NO_RENDER ); // ... } public function showAction($postId) { // Shows only the view related to the action $this->view->setRenderLevel( View::LEVEL_ACTION_VIEW ); } } ~~~ 可用的渲染級別: | 類常量 | 解釋 | 順序 | | --- | --- | --- | | LEVEL_NO_RENDER | 表明要避免產生任何形式的顯示。 | 0| | LEVEL_ACTION_VIEW | 生成顯示到視圖關聯的動作。 | 1 | | LEVEL_BEFORE_TEMPLATE | 生成顯示到控制器模板布局之前。 | 2 | | LEVEL_LAYOUT | 生成顯示到控制器布局。 | 3 | | LEVEL_AFTER_TEMPLATE | 生成顯示到控制器模板布局后。 | 4 | | LEVEL_MAIN_LAYOUT |生成顯示到主布局。文件： views/index.phtml | 5 | #### 關閉渲染級別（Disabling render levels）你可以永久或暫時禁用渲染級別。如果不在整個應用程序使用，可以永久禁用一個級別： ~~~ <?php use Phalcon\Mvc\View; $di->set( "view", function () { $view = new View(); // Disable several levels $view->disableLevel( [ View::LEVEL_LAYOUT => true, View::LEVEL_MAIN_LAYOUT => true, ] ); return $view; }, true ); ~~~ 或者在某些應用程序的一部分暫時或禁用: ~~~ <?php use Phalcon\Mvc\View; use Phalcon\Mvc\Controller; class PostsController extends Controller { public function indexAction() { } public function findAction() { $this->view->disableLevel( View::LEVEL_MAIN_LAYOUT ); } } ~~~ #### 選擇視圖（Picking Views）如上所述, 當 Phalcon\Mvc\View 由 Phalcon\Mvc\Application 視圖渲染的是最后的一個相關的控制器和執行動作。你可以使用 `Phalcon\Mvc\View::pick()` 方法覆蓋它。 ~~~ <?php use Phalcon\Mvc\Controller; class ProductsController extends Controller { public function listAction() { // Pick "views-dir/products/search" as view to render $this->view->pick("products/search"); // Pick "views-dir/books/list" as view to render $this->view->pick( [ "books", ] ); // Pick "views-dir/products/search" as view to render $this->view->pick( [ 1 => "search", ] ); } } ~~~ #### 關閉視圖（Disabling the view）如果你的控制器不在視圖里產生(或沒有)任何輸出，你可以禁用視圖組件來避免不必要的處理： ~~~ <?php use Phalcon\Mvc\Controller; class UsersController extends Controller { public function closeSessionAction() { // Close session // ... // Disable the view to avoid rendering $this->view->disable(); } } ~~~ Alternatively, you can return `false` to produce the same effect: ~~~ <?php use Phalcon\Mvc\Controller; class UsersController extends Controller { public function closeSessionAction() { // ... // Disable the view to avoid rendering return false; } } ~~~ 你可以返回一個“response”的對象，避免手動禁用視圖: ~~~ <?php use Phalcon\Mvc\Controller; class UsersController extends Controller { public function closeSessionAction() { // Close session // ... // A HTTP Redirect return $this->response->redirect("index/index"); } } ~~~ #### 簡單渲染（Simple Rendering） Phalcon\Mvc\View\Simple 是 Phalcon\Mvc\View 的另一個組成部分。它保留 Phalcon\Mvc\View 的大多數的設計思想，但缺少文件的層次結構是它們的主要區別。該組件允許開發人員控制渲染視圖時，視圖所在位置。此外，該組件可以利用從視圖中繼承的可用的模板引擎。比如 Volt 和其他的一些模板引擎。默認使用該組件必須替換服務容器： ~~~ <?php use Phalcon\Mvc\View\Simple as SimpleView; $di->set( "view", function () { $view = new SimpleView(); $view->setViewsDir("../app/views/"); return $view; }, true ); ~~~ 自動渲染必須在 Phalcon\Mvc\Application 被禁用 (如果需要): ~~~ <?php use Exception; use Phalcon\Mvc\Application; try { $application = new Application($di); $application->useImplicitView(false); $response = $application->handle(); $response->send(); } catch (Exception $e) { echo $e->getMessage(); } ~~~ 渲染一個視圖必須顯式地調用render方法來指定你想顯示的視圖的相對路徑： ~~~ <?php use Phalcon\Mvc\Controller; class PostsController extends \Controller { public function indexAction() { // Render 'views-dir/index.phtml' echo $this->view->render("index"); // Render 'views-dir/posts/show.phtml' echo $this->view->render("posts/show"); // Render 'views-dir/index.phtml' passing variables echo $this->view->render( "index", [ "posts" => Posts::find(), ] ); // Render 'views-dir/posts/show.phtml' passing variables echo $this->view->render( "posts/show", [ "posts" => Posts::find(), ] ); } } ~~~ This is different to Phalcon\Mvc\View who’s` render() `method uses controllers and actions as parameters: 這與Phalcon\Mvc\View的` render() `不同。該方法使用控制器和動作作為參數: ~~~ <?php $params = [ "posts" => Posts::find(), ]; // Phalcon\Mvc\View $view = new \Phalcon\Mvc\View(); echo $view->render("posts", "show", $params); // Phalcon\Mvc\View\Simple $simpleView = new \Phalcon\Mvc\View\Simple(); echo $simpleView->render("posts/show", $params); ~~~ #### 使用局部模版（Using Partials）局部模板是把渲染過程分解成更簡單、更好管理的、可以重用不同部分的應用程序塊的另一種方式。你可以移動渲染特定響應的代碼塊到自己的文件。使用局部模板的一種方法是把它們作為相等的子例程：作為一種移動細節視圖，這樣您的代碼可以更容易地被理解。例如，您可能有一個視圖看起來像這樣： ~~~ <div class="top"><?php $this->partial("shared/ad_banner"); ?></div> <div class="content"> <h1>Robots</h1> <p>Check out our specials for robots:</p> ... </div> <div class="footer"><?php $this->partial("shared/footer"); ?></div> ~~~ 方法 `partial() `也接受一個只存在于局部范圍的變量/參數的數組作為第二個參數: ~~~ <?php $this->partial("shared/ad_banner", ["id" => $site->id, "size" => "big"]); ?> ~~~ #### 控制器傳值給視圖（Transfer values from the controller to views） Phalcon\Mvc\View 可以在每個控制器中使用視圖變量 ($this->view)。你可以在控制器動作中使用視圖對象的 setVar() 方法直接設置視圖變量。 ~~~ <?php use Phalcon\Mvc\Controller; class PostsController extends Controller { public function indexAction() { } public function showAction() { $user = Users::findFirst(); $posts = $user->getPosts(); // Pass all the username and the posts to the views $this->view->setVar("username", $user->username); $this->view->setVar("posts", $posts; // Using the magic setter $this->view->username = $user->username; $this->view->posts = $posts; // Passing more than one variable at the same time $this->view->setVars( [ "username" => $user->username, "posts" => $posts, ] ); } } ~~~ 名為:code:`setVar()`的第一參數值的變量將在視圖中創建的，并且可以被使用。變量可以是任何類型：從一個簡單的字符串，整數等等，變為更復雜的結構，如數組，集合。 ~~~ <h1> {{ username }}'s Posts </h1> <div class="post"> <?php foreach ($posts as $post) { echo "<h2>", $post->title, "</h2>"; } ?> </div> ~~~ #### 緩存視圖片段（Caching View Fragments）有時當你開發動態網站和一些區域不會經常更新，請求的輸出是完全相同的。 Phalcon\Mvc\View 提供緩存全部或部分的渲染輸出來提高性能。將 Phalcon\Mvc\View 配合 Phalcon\Cache 能提供一種更簡單的方法緩存輸出片段。你可以手動設置緩存處理程序或一個全局處理程序。 ~~~ <?php use Phalcon\Mvc\Controller; class PostsController extends Controller { public function showAction() { // Cache the view using the default settings $this->view->cache(true); } public function showArticleAction() { // Cache this view for 1 hour $this->view->cache( [ "lifetime" => 3600, ] ); } public function resumeAction() { // Cache this view for 1 day with the key "resume-cache" $this->view->cache( [ "lifetime" => 86400, "key" => "resume-cache", ] ); } public function downloadAction() { // Passing a custom service $this->view->cache( [ "service" => "myCache", "lifetime" => 86400, "key" => "resume-cache", ] ); } } ~~~ 如果我們沒有定義緩存的key，這個組件會自動創建一個 MD5 散列值(由當前控制器名和視圖名組成”controller/view”的格式)作為key。為每個action定義一個單獨的緩存key，這是一個好的習慣與規范，這樣你可以很容易地識別與每個視圖相關聯的緩存。當視圖組件需要緩存一些數據時，它會從服務容器(DI)中請求緩存服務。這個服務的名稱約定為”viewCache”： ~~~ <?php use Phalcon\Cache\Frontend\Output as OutputFrontend; use Phalcon\Cache\Backend\Memcache as MemcacheBackend; // Set the views cache service $di->set( "viewCache", function () { // Cache data for one day by default $frontCache = new OutputFrontend( [ "lifetime" => 86400, ] ); // Memcached connection settings $cache = new MemcacheBackend( $frontCache, [ "host" => "localhost", "port" => "11211", ] ); return $cache; } ); ~~~ * * * * * > 前端 Phalcon\Cache\Frontend\Output 和服務 ‘viewCache’ 必須在服務容器（DI）注冊為總是開放的（不共享 not shared） * * * * * 在視圖中使用視圖緩存也是有用的，以防止控制器執行過程所產生的數據被顯示。為了實現這一點，我們必須確定每個緩存鍵是獨一無二的。首先，我們驗證緩存不存在或是否過期，再去計算/查詢并在視圖中顯示數據: ~~~ <?php use Phalcon\Mvc\Controller; class DownloadController extends Controller { public function indexAction() { // Check whether the cache with key "downloads" exists or has expired if ($this->view->getCache()->exists("downloads")) { // Query the latest downloads $latest = Downloads::find( [ "order" => "created_at DESC", ] ); $this->view->latest = $latest; } // Enable the cache with the same key "downloads" $this->view->cache( [ "key" => "downloads", ] ); } } ~~~ PHP alternative site 是實現緩存片段的一個例子。 #### 模版引擎（Template Engines）模板引擎可以幫助設計者不使用復雜的語法創建視圖。Phalcon包含一個強大的和快速的模板引擎，它被叫做叫 Volt。此外, Phalcon\Mvc\View 允許你使用其它的模板引擎而不是簡單的PHP或者Volt。使用不同的模板引擎，通常需要使用外部PHP庫并且引入復雜的文本解析來為用戶生成最終的輸出解析。這通常會增加一些你的應用程序的資源耗費。如果一個外部模板引擎被使用，Phalcon\Mvc\View 提供完全相同的視圖渲染等級，仍然可以嘗試在這些模板內訪問的更多的API。該組件使用的適配器，這些適配器幫助 Phalcon 與外部模板引擎以一個統一的方式對話，讓我們看看如何整合。 #### 創建模版引擎（Creating your own Template Engine Adapter）有很多模板引擎，你可能想整合或建立一個自己的。開始使用一個外部的模板引擎的第一步是創建一個適配器。模板引擎的適配器是一個類，作為 Phalcon\Mvc\View 和模板引擎本身之間的橋梁。通常它只需要實現兩個方法: `__construct()` `and render()`。首先接收 `Phalcon\Mvc\View` 和應用程序使用的DI容器來創建引擎適配器實例。方法 `render()` 接受一個到視圖文件的絕對路徑和視圖參數，設置使用 `$this->view->setVar()`。必要的時候，你可以讀入或引入它。 ~~~ <?php use Phalcon\DiInterface; use Phalcon\Mvc\Engine; class MyTemplateAdapter extends Engine { /** * Adapter constructor * * @param \Phalcon\Mvc\View $view * @param \Phalcon\Di $di */ public function __construct($view, DiInterface $di) { // Initialize here the adapter parent::__construct($view, $di); } /** * Renders a view using the template engine * * @param string $path * @param array $params */ public function render($path, $params) { // Access view $view = $this->_view; // Access options $options = $this->_options; // Render the view // ... } } ~~~ #### 替換模版引擎（Changing the Template Engine）你可以完全更換模板引擎或同時使用多個模板引擎。方法` Phalcon\Mvc\View::registerEngines() `接受一個包含定義模板引擎數據的數組。每個引擎的鍵名是一個區別于其他引擎的拓展名。模板文件和特定的引擎關聯必須有這些擴展名。 `Phalcon\Mvc\View::registerEngines()` 會按照相關順序定義模板引擎執行。如果 Phalcon\Mvc\View 發現具有相同名稱但不同的擴展，它只會使第一個。如果你想在應用程序的每個請求中注冊一個或一組模板引擎。你可以在創建視圖時注冊服務： ~~~ <?php use Phalcon\Mvc\View; // Setting up the view component $di->set( "view", function () { $view = new View(); // A trailing directory separator is required $view->setViewsDir("../app/views/"); // Set the engine $view->registerEngines( [ ".my-html" => "MyTemplateAdapter", ] ); // Using more than one template engine $view->registerEngines( [ ".my-html" => "MyTemplateAdapter", ".phtml" => "Phalcon\\Mvc\\View\\Engine\\Php", ] ); return $view; }, true ); ~~~ 在 Phalcon Incubator 有一些適配器可用于數個模板引擎 #### 注入服務到視圖（Injecting services in View）每個視圖執行內部包含一個 Phalcon\Di\Injectable 實例, 提供方便地方式訪問應用程序的服務容器。下面的示例演示如何用一個框架約定好的URL服務寫一個 jQuery ajax request 。 “url” (usually Phalcon\Mvc\Url) 服務被注入在視圖由相同名稱的屬性訪問： ~~~ <script type="text/javascript"> $.ajax({ url: "<?php echo $this->url->get("cities/get"); ?>" }) .done(function () { alert("Done!"); }); </script> ~~~ #### 獨立的組件（Stand-Alone Component）在Phalcon的所有部件都可以作為膠水（glue）組件單獨使用，因為它們彼此松散耦合: #### 分層渲染（Hierarchical Rendering）如下所示，可以單獨使用 Phalcon\Mvc\View： ~~~ <?php use Phalcon\Mvc\View; $view = new View(); // A trailing directory separator is required $view->setViewsDir("../app/views/"); // Passing variables to the views, these will be created as local variables $view->setVar("someProducts", $products); $view->setVar("someFeatureEnabled", true); // Start the output buffering $view->start(); // Render all the view hierarchy related to the view products/list.phtml $view->render("products", "list"); // Finish the output buffering $view->finish(); echo $view->getContent(); ~~~ 使用短的語法也可以: ~~~ <?php use Phalcon\Mvc\View; $view = new View(); echo $view->getRender( "products", "list", [ "someProducts" => $products, "someFeatureEnabled" => true, ], function ($view) { // Set any extra options here $view->setViewsDir("../app/views/"); $view->setRenderLevel( View::LEVEL_LAYOUT ); } ); ~~~ #### 簡單渲染（Simple Rendering）如下所示，以單獨使用 Phalcon\Mvc\View\Simple： ~~~ <?php use Phalcon\Mvc\View\Simple as SimpleView; $view = new SimpleView(); // A trailing directory separator is required $view->setViewsDir("../app/views/"); // Render a view and return its contents as a string echo $view->render("templates/welcomeMail"); // Render a view passing parameters echo $view->render( "templates/welcomeMail", [ "email" => $email, "content" => $content, ] ); ~~~ #### 視圖事件（View Events）如果事件管理器（EventsManager）存在，Phalcon\Mvc\View 和 Phalcon\Mvc\View 能夠發送事件到 EventsManager。事件觸發使用的“view”類型。當返回布爾值false，一些事件可以停止運行。以下是被支持的事件： | 事件名 | 觸發點 | 是否可以停止? | | --- | --- | --- | | beforeRender | 渲染過程開始前觸發 | Yes | | beforeRenderView | 渲染一個現有的視圖之前觸發 | Yes | | afterRenderView | 渲染一個現有的視圖之后觸發 | No | | afterRender | 渲染過程完成后觸發 | No | | notFoundView | 視圖不存在時觸發 | No | 下面的例子演示了如何將監聽器附加到該組件： ~~~ <?php use Phalcon\Events\Event; use Phalcon\Events\Manager as EventsManager; use Phalcon\Mvc\View; $di->set( "view", function () { // Create an events manager $eventsManager = new EventsManager(); // Attach a listener for type "view" $eventsManager->attach( "view", function (Event $event, $view) { echo $event->getType(), " - ", $view->getActiveRenderPath(), PHP_EOL; } ); $view = new View(); $view->setViewsDir("../app/views/"); // Bind the eventsManager to the view component $view->setEventsManager($eventsManager); return $view; }, true ); ~~~ 下面的示例演示如何創建一個插件 Tidy ，清理/修復的渲染過程中產生的HTML： ~~~ <?php use Phalcon\Events\Event; class TidyPlugin { public function afterRender(Event $event, $view) { $tidyConfig = [ "clean" => true, "output-xhtml" => true, "show-body-only" => true, "wrap" => 0, ]; $tidy = tidy_parse_string( $view->getContent(), $tidyConfig, "UTF8" ); $tidy->cleanRepair(); $view->setContent( (string) $tidy ); } } // Attach the plugin as a listener $eventsManager->attach( "view:afterRender", new TidyPlugin() ); ~~~