Partials
partials 我們這裡簡稱【部件】,是可以重複使用的Twig標記塊。可以用於網站的任何位置。比如頁首頁尾或者其他Ajax內容。
partials模板檔案儲存在模板目錄的partials子目錄中。副檔名是htm。最簡單的例子:
<p>This is a partial</p>
partials 的配置部分是可選的,其中可選引數description,用於給後端使用者提供功能說明。
description = "Demo partial"
==
<p>This is a partial</p>
在配置部分可以定義元件,將在後續的元件部分學習。
部件的渲染
渲染部件的方式:{% partial “partial-name” %} 。這裡只有一個必須的引數,就是【檔名】這裡的檔名是指檔案的名稱部分,不包含副檔名部分。如果在子目錄中,則需要寫明路徑。部件可以被頁面、佈局或者其他部件使用。
下面就是一個部件引用了另一個部件。
<div class="sidebar">
{% partial "sidebar-contacts" %}
</div>
將變數傳遞給部件
部件的一個強大的功能是,我們可以給部件傳遞變數引數。比如我們擁有一個渲染部落格列表的部件,我們可以將帖子的集合傳遞給中國部落格列表部件。這時候這個部件就可以使用到多個不同的頁面或者佈局中。傳遞方式:部件名稱 後面 跟 部件的變數名和傳遞值得變數名:
<div class="sidebar">
{% partial "blog-posts" posts=posts %}
</div>
當然也可以一次指定多個變數,進行傳遞
<div class="sidebar">
{% partial "sidebar-contacts" city="Vancouver" country="Canada" %}
</div>
在部件的內部,可以和使用其他標記變數一樣的,使用這些變數。
<p>Country: {{ country }}, city: {{ city }}.</p>
動態部件
部件和頁面一樣,也可以使用Twig標記。
部件的執行生命週期
onStart函式在部件渲染之前和部分執行之前執行。
onEnd函式在部件渲染之前和部件執行之後執行。
在onStart和onEnd函式中,您可以將變數注入到Twig環境中。使用array notation將變數傳遞給頁面:
==
function onStart()
{
$this[`hello`] = "Hello world!";
}
==
<h3>{{ hello }}</h3>
宣告週期限制
由於部件的例項化時間比較晚,在頁面渲染期間,部件的生命週期會受到一些限制。
- AJax事件沒有被註冊,不能執行。
- 生命週期函式不能返回任何值。
- 表單常規的POST操作在部件渲染的時候執行。
一般來講,部件中的元件一般設計為基本元件,用來渲染一些沒有複雜處理的情況,比如按鈕等。