У мене є більш лаконічна версія nav_link, яка працює точно так само, як link_to, але налаштована для виведення обгорткового тегу li.
Помістіть наступне у своєму application_helper.rb
def nav_link(*args, &block)
if block_given?
options = args.first || {}
html_options = args.second
nav_link(capture(&block), options, html_options)
else
name = args[0]
options = args[1] || {}
html_options = args[2]
html_options = convert_options_to_data_attributes(options, html_options)
url = url_for(options)
class_name = current_page?(url) ? 'active' : nil
href = html_options['href']
tag_options = tag_options(html_options)
href_attr = "href=\"#{ERB::Util.html_escape(url)}\"" unless href
"<li class=\"#{class_name}\"><a #{href_attr}#{tag_options}>#{ERB::Util.html_escape(name || url)}</a></li>".html_safe
end
end
Якщо ви подивитеся на наведений вище код і порівняєте його з кодом link_to в url_helper.rb, різниця полягає лише в тому, що він перевіряє, чи є URL-адресою поточну сторінку, і додає клас "активний" до обгорткового тегу li. Це тому, що я використовую помічник nav_link з навігаційним компонентом Twitter Bootstrap який надає перевагу загортанню посилань всередині тегів li та класу "active", застосованого до зовнішнього li.
Приємна річ у наведеному вище коді полягає в тому, що він дозволяє вам перейти в блок у функцію, як ви можете це зробити з link_to.
Наприклад, навігаційний список для завантаження з іконками виглядатиме так:
Тонкий:
ul.nav.nav-list
=nav_link root_path do
i.icon-home
| Home
=nav_link "#" do
i.icon-user
| Users
Вихід:
<ul class="nav nav-list">
<li class="active">
<a href="/">
<i class="icon-home"/>
Home
</a>
</li>
<li>
<a href="#">
<i class="icon-users"/>
Users
</a>
</li>
</ul>
Крім того, подібно до помічника link_to, ви можете передати параметри HTML у nav_link, який буде застосовано до тегу.
Приклад передачі заголовка для якіря:
Тонкий:
ul.nav.nav-list
=nav_link root_path, title:"Home" do
i.icon-home
| Home
=nav_link "#", title:"Users" do
i.icon-user
| Users
Вихід:
<ul class="nav nav-list">
<li class="active">
<a href="/" title="Home">
<i class="icon-home"/>
Home
</a>
</li>
<li>
<a href="#" title="Users">
<i class="icon-users"/>
Users
</a>
</li>
</ul>