Harp 當(dāng)前對(duì)象

當(dāng)前對(duì)象是在你的應(yīng)用導(dǎo)航中應(yīng)用激活狀態(tài)的最好方式。它對(duì)每個(gè)模板可用，并且包含當(dāng)前被渲染頁(yè)面的狀態(tài)。

當(dāng)復(fù)用像導(dǎo)航這樣的模板時(shí)，當(dāng)前對(duì)象對(duì)于給導(dǎo)航應(yīng)用一個(gè)激活狀態(tài)是非常有用的，還有可能以非傳統(tǒng)的方式渲染布局或者局部視圖。這讓我們的應(yīng)用代碼保持“盡量不要重復(fù)自己（DRY）”，而又不會(huì)讓?xiě)?yīng)用的可用性打折扣。

屬性

• path - (Array) 這是正在呈現(xiàn)的當(dāng)前頁(yè)面的文件路徑。
• source - (String) 它是路徑數(shù)組中最后一個(gè)元素的快捷方式。

注意- 當(dāng)前對(duì)象中的文件擴(kuò)展名被忽略。

Harp 提供了一個(gè)當(dāng)前頁(yè)面路徑的數(shù)組，通過(guò)一個(gè)叫做 current source 的列表中的最后一個(gè)元素。這個(gè)信息通過(guò)當(dāng)前對(duì)象是可用的，在你訪問(wèn)的每個(gè)頁(yè)面上都是動(dòng)態(tài)更新的。

例如，訪問(wèn) /articles/hello-world 時(shí)，下面的信息是可用的：

{
  path: ["articles", "hello-world"],
  source: "hello-world"
}

然而訪問(wèn) /articles/ 時(shí)，當(dāng)前對(duì)象是下面這樣的：

{
  path: ["articles", "index"],
  source: "index"
}

現(xiàn)在，你可以在模板文件中使用這個(gè)了。

示例用法

這個(gè)應(yīng)用有一個(gè) index.jade 和 about.jade 頁(yè)面。這些頁(yè)面都有一個(gè)簡(jiǎn)單的導(dǎo)航，包含在 _nav.jade 局部視圖 中。

通過(guò)在 _nav.jade 模板中使用當(dāng)前對(duì)象，你可以告訴 nav 模板正在被渲染的上下文（即，當(dāng)前訪問(wèn)的是哪一個(gè)頁(yè)面）。

給定下面一個(gè)項(xiàng)目：

myproject/
  |- index.jade
  |- about.jade
  +- _nav.jade

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

EJS 示例

同樣的模板，_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。這些然后可以通過(guò) CSS 樣式化，或者你的預(yù)處理器選擇：Sass， LESS，或者 Stylus。