99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

Harp 當前對象

2021-09-24 19:09 更新

當前對象是在你的應用導航中應用激活狀態(tài)的最好方式。它對每個模板可用,并且包含當前被渲染頁面的狀態(tài)。

當復用像導航這樣的模板時,當前對象對于給導航應用一個激活狀態(tài)是非常有用的,還有可能以非傳統的方式渲染布局或者局部視圖。這讓我們的應用代碼保持“盡量不要重復自己(DRY)”,而又不會讓應用的可用性打折扣。

屬性

  • path - (Array) 這是正在呈現的當前頁面的文件路徑。
  • source - (String) 它是路徑數組中最后一個元素的快捷方式。

注意- 當前對象中的文件擴展名被忽略。

Harp 提供了一個當前頁面路徑的數組,通過一個叫做 current source 的列表中的最后一個元素。這個信息通過當前對象是可用的,在你訪問的每個頁面上都是動態(tài)更新的。

例如,訪問 /articles/hello-world 時,下面的信息是可用的:

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

然而訪問 /articles/ 時,當前對象是下面這樣的:

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

現在,你可以在模板文件中使用這個了。

示例用法

這個應用有一個 index.jade 和 about.jade 頁面。這些頁面都有一個簡單的導航,包含在 _nav.jade 局部視圖 中。

通過在 _nav.jade 模板中使用當前對象,你可以告訴 nav 模板正在被渲染的上下文(即,當前訪問的是哪一個頁面)。

給定下面一個項目:

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 , 你現在可以在導航上擁有依賴上下文的 classes。這些然后可以通過 CSS 樣式化,或者你的預處理器選擇:Sass, LESS,或者 Stylus。

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號