當(dāng)前對象是在你的應(yīng)用導(dǎo)航中應(yīng)用激活狀態(tài)的最好方式。它對每個模板可用,并且包含當(dāng)前被渲染頁面的狀態(tài)。
當(dāng)復(fù)用像導(dǎo)航這樣的模板時,當(dāng)前對象對于給導(dǎo)航應(yīng)用一個激活狀態(tài)是非常有用的,還有可能以非傳統(tǒng)的方式渲染布局或者局部視圖。這讓我們的應(yīng)用代碼保持“盡量不要重復(fù)自己(DRY)”,而又不會讓應(yīng)用的可用性打折扣。
屬性
注意- 當(dāng)前對象中的文件擴(kuò)展名被忽略。
Harp 提供了一個當(dāng)前頁面路徑的數(shù)組,通過一個叫做 current source 的列表中的最后一個元素。這個信息通過當(dāng)前對象是可用的,在你訪問的每個頁面上都是動態(tài)更新的。
例如,訪問 /articles/hello-world
時,下面的信息是可用的:
{
path: ["articles", "hello-world"],
source: "hello-world"
}
然而訪問 /articles/
時,當(dāng)前對象是下面這樣的:
{
path: ["articles", "index"],
source: "index"
}
現(xiàn)在,你可以在模板文件中使用這個了。
這個應(yīng)用有一個 index.jade
和 about.jade
頁面。這些頁面都有一個簡單的導(dǎo)航,包含在 _nav.jade 局部視圖 中。
通過在 _nav.jade 模板中使用當(dāng)前對象,你可以告訴 nav 模板正在被渲染的上下文(即,當(dāng)前訪問的是哪一個頁面)。
給定下面一個項目:
myproject/
|- index.jade
|- about.jade
+- _nav.jade
_nav.jade
文件,使用 current.source
:
ul
li(class="#{ current.source == 'index' ? 'active' : '' }")
a(href="/") Home
li(class="#{ current.source == 'about' ? 'active' : '' }")
a(href="/about") About
同樣的模板,_nav.ejs
而不是 nav.jade
:
<ul>
<li class="<%- current.source == 'index' ? 'active' : '' %>">
<a href="/">Home</a>
</li>
<li class="<%- current.source == 'about' ? 'active' : '' %>">
<a href="/about">About</a>
</li>
</ul>
有了 current.source
, 你現(xiàn)在可以在導(dǎo)航上擁有依賴上下文的 classes。這些然后可以通過 CSS 樣式化,或者你的預(yù)處理器選擇:Sass, LESS,或者 Stylus。
更多建議: