Tôi có bố cục Jade view có menu qua danh sách không theo thứ tự và tôi muốn đặt <li> thành <li class="active">...</li> khi trang hiện tại được hiển thị trong trình duyệt.Truy cập yêu cầu hiện tại ở chế độ Express/Jade
Tôi giả sử tôi sẽ phải truy cập theo yêu cầu hiện tại để xác định khi nào để thiết lập các thuộc tính trên <li>
tôi không thể tìm thấy bất kỳ ví dụ về làm thế nào để làm điều này một người nào đó để hy vọng có thể giúp
Cảm ơn
Hãy thử điều này trước khi cuộc gọi của bạn res.render() trong lộ trình của bạn:
res.locals.path = req.path;
res.render('/page');
hoặc
res.render('/page', { path: req.path });
Sau đó, bạn sẽ phải làm một một loạt các câu lệnh if/else trong quan điểm của bạn (như giải pháp trên cho thấy).
- if(currentUrl === '/')
li(class='active')
a(href='/') Current Driver Standings
- else
li
a(href='/') Current Driver Standings
Tôi tuy nhiên, thích làm này đứng về phía khách hàng thay vào đó, để giữ mẫu của tôi tập tin miễn phí từ nhiều lý càng tốt:
Trong trang tập tin mẫu (đây là EJS, không chắc chắn làm thế nào để tiếng vang trong ngọc bích):
<body data-path="<%= path %>">
Sau đó với jQuery bạn có thể lấy các con đường từ cơ thể và đính kèm một lớp tích cực:
$(function(){
var path = $('body').attr('data-path');
$('nav li a[href='+path+']').parents('li').addClass('active');
});
Cập nhật: Bạn cũng có thể chỉ cần sử dụng var path = window.location.pathname thay vì lưu nó vào một thuộc tính trên body
//no need to save path to <body> tag first:
$(function(){
var path = window.location.pathname;
$('nav li a[href='+path+']').parents('li').addClass('active');
});
Tôi đã nghĩ ra điều này nhưng tôi không chắc liệu thực hành tốt nhất của nó có hoạt động hay không. Xin vui lòng cho tôi biết một trong hai cách:
response.render("current/currentSchedule", {
title: "Current Race Schedule",
currentUrl: req.path,
});
ul(class='nav nav-list')
li(class='nav-header') Current Season
- if(currentUrl === '/')
li(class='active')
a(href='/') Current Driver Standings
- else
li
a(href='/') Current Driver Standings
- if(currentUrl === '/constructor-standings')
li(class='active')
a(href='/constructor-standings') Current Constructor Standings
- else
li
a(href='/constructor-standings') Current Constructor Standings
- if(currentUrl === '/current-schedule')
li(class='active')
a(href='/current-schedule') Current Race Schedule
- else
li
a(href='/current-schedule') Current Race Schedule
này là khá khó khăn để duy trì bởi vì bạn đang lặp lại những tên lớp và liên kết nhiều lần, và cũng có thể là rất nhiều mã . Xem câu trả lời của tôi cho một cách dễ dàng hơn. Nó cũng có thể được điều chỉnh để làm việc tắt currentUrl như trong câu trả lời của bạn, nhưng thường các mục nav chính sẽ vẫn được giữ nguyên cho các đường dẫn phụ mà sẽ không xảy ra với phương thức bạn đã sử dụng. –
Đây là một cách gọn gàng hơn nhiều để làm việc đó, server-side:
Trong bạn routes.js (hoặc bất cứ nơi nào) xác định một mảng các đối tượng đại diện cho nav của bạn như ví dụ:
var navLinks = [
{ label: 'Home', key: 'home', path: '' },
{ label: 'About', key: 'about', path: '/about' },
{ label: 'Contact', key: 'contact', path: '/contact' }
]
Vượt qua biến navLinks để xem bạn, cũng như chìa khóa của mặt hàng đó mà bạn muốn hilighted:
res.render('home', { title: 'Welcome!', section: 'home', navLinks: navLinks });
Bạn cũng có thể thêm các biến navLinks-app.locals và tiết kiệm cho mình luôn cần phải cung cấp cho nó một cách rõ ràng quan điểm.
Sau đó, trong ngọc bích của bạn mẫu lặp qua mảng các liên kết và thiết lập các lớp hoạt động trên một có trận đấu phần cung cấp chính:
ul(class='nav nav-list')
- navLinks.forEach(function(link){
- var isActive = (link.key == section ? 'active' : '')
li(class=isActive)
a(href=link.path)= link.label
- })
Vượt qua req.originalUrl trong tập tin tuyến đường của bạn. ví dụ: trong số /tuyến đường/của bạn.js
router.get('/', function(req, res) {
res.render('about', {
url: req.originalUrl
});
});
Sau đó, viết nếu điều kiện nào khác trên mẫu ngọc bích của bạn
if(url==='/about-us')
li(class='active')
a(href='about-us') About Us
else
li
a(href='about-us') About Us
Điều duy nhất tôi sẽ nói về nó, là bạn đang dựa vào người dùng có JS (không phải là một mối quan tâm lớn những ngày này) nhưng bạn có thể kết thúc với những thứ khác hiện có như là thuộc tính vì lý do nào đó và rất nhiều đánh dấu xấu xí sản xuất – Jon
Ngoài ra là có một lỗi đánh máy trong ví dụ của bạn? Req.path có sẵn trong EJS không? Nó không phải là tài sản của mô hình xem của bạn? – Jon
xin lỗi, trong các tuyến đường của tôi, tôi làm res.locals.req = req để tôi có quyền truy cập vào tất cả thông tin đó. Nhưng tôi chỉ nhận ra rằng bạn cũng có thể chỉ cần sử dụng window.location.pathname thay vì lưu nó trên thẻ body. – chovy