Cách tạo thanh điều hướng trong công cụ mẫu ít logic như ria mép

Question

Tôi đang cố gắng hiểu khái niệm đằng sau temlpates ít logic, nhưng tôi thấy mình đang va vào tường.

Tôi muốn triển khai thanh điều hướng đơn giản, ví dụ: Liên kết "Trang chủ, Giới thiệu, Liên hệ" ở đầu mỗi trang và liên kết "hiện tại" sẽ được đánh dấu bằng một lớp khác (tôi đang sử dụng bootstrap). Nhưng làm thế nào tôi có thể làm điều này một cách hợp lý? Cho đến nay tôi có:

1. Di chuyển điều hướng đến từng mẫu và sao chép toàn bộ nội dung (không KHÔ, xấu xí).
2. Sử dụng các khóa thay vì giá trị, tức là với <a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a>. Điều này là tốt hơn, nhưng vẫn còn khó chịu mà tôi phải tạo N biến để giữ 1-biến giá trị của dữ liệu.
3. tạo điều hướng trong bộ điều khiển, tức là vượt qua trong { 'Home': {link: '/', active: false}, 'About: {link: '/about', active: true} } hoặc tương tự. Tôi không thích điều này bởi vì nó có vấn đề ngược lại của các mẫu ít logic hơn. Bây giờ tôi có bộ điều khiển HTML-ful ...

Với các tùy chọn ở trên, tôi thích (2) là tốt nhất. Nhưng những gì tôi muốn là một số cách để có một biến duy nhất để kiểm tra, như:

// controller 
render('about', {active: 'about'}); 
render('home', {active: 'home'}); 

// mustache nav 
<a href="/" {{#if active == 'home'}}class="active"{{/if}}>Home</a> 
<a href="/about" {{#if active == 'about'}}class="active"{{/if}}>About</a> 

Tôi chắc chắn điều này đi lên tất cả thời gian cho các chuyên gia ria mép --- những gì là cách tốt nhất để đối phó với nó?

Answer 1

Không có cách nào để giải quyết vấn đề này bằng vanilla Mustache. Bạn có hai lựa chọn cho phép dữ liệu JSON của bạn và mẫu luôn sạch sẽ:

1- sử dụng Moustache, hãy viết một hàm helper để bạn có thể sử dụng nó như thế này:

var selected_item = function(param) { 
    if (param == this.active) { 
     return 'active'; 
    } 
}; 

(từ chối trách nhiệm: Tôi đã viết helper này ra khỏi đỉnh đầu của tôi, có thể không làm việc như nó vốn có nhưng tôi nghĩ rằng bạn sẽ có được điểm)

<a href="/" class="{{#selected_item}}home{{/selected_item}}">Home</a> 
<a href="/about" class="{{#selected_item}}about{{/selected_item}}">About</a> 

sau đó trộn trong helper đó vào dữ liệu JSON của bạn, cách tốt nhất có lẽ là quá tải Mustache.render để mọi cuộc gọi đến render thêm trợ giúp của bạn vào danh sách kết hợp. Lưu ý rằng để phần class="" bên ngoài trình trợ giúp cho phép bạn có nhiều lớp khác nhau trên mỗi mục menu trong khi vẫn có "logic" cho phần hoạt động.

2- chuyển sang Handlebars cho phép loại logic cơ bản này. Handlebars là một superset của Mustache, các công cụ hoạt động trên vanilla Mustache sẽ trực tiếp làm việc trong Handlebars để nâng cấp dễ dàng. Hãy cẩn thận mặc dù, một khi bạn đã nâng cấp và sửa đổi các mẫu của bạn để làm việc với Handlebars không có quay trở lại.

Answer 2

Tôi vừa viết một bài đăng về điều này. Nhấn here hoặc trên các biểu ngữ:

Ý tưởng cơ bản để làm điều này với bộ ria mép vani và NodeJS là như vậy:

app.get('/Portfolio', function(req, res) { 
    res.render('portfolio.html', { 
     Portfolio: 'class="current"', 
    }); 
}); 


app.get('/Blog', function(req, res) { 
    res.render('blog.html', { 
     Blog: 'class="current"', 
    }); 
}); 

Thông báo như thế nào mỗi con đường riêng biệt gửi một biến ria mép khác nhau.Nếu người dùng truy cập/Danh mục đầu tư, biến số {{{Portfolio}}} sẽ tồn tại nhưng biến số {{{Blog}}} sẽ không.

Sử dụng ý tưởng này, thiết lập liên kết điều hướng của bạn như vậy:

<div id="nav"> 
    <ul> 
     <li><a href="/Portfolio" {{{ Portfolio }}}>Portfolio</a></li> 
     <li><a href="/Blog"  {{{ Blog }}}>Blog</a></li> 
    </ul> 
</div> 

Tạo lớp .current

#nav li a.current { 
    font-weight: 900; 
} 

Bây giờ vào liên kết sẽ được đánh dấu phụ thuộc vào các cuộc gọi định tuyến được thực hiện.