콧수염처럼 논리가없는 템플릿 엔진에서 nav-bar를 만드는 방법

Question

논리가없는 태생의 개념을 이해하려고 노력하고 있지만 벽을 치고 있음을 알고 있습니다.

예를 들어 간단한 탐색 바를 구현하고 싶습니다. 모든 페이지의 상단에 "홈, 정보, 연락처"링크가 있으며 "현재"클래스는 다른 클래스로 강조 표시되어야합니다 (저는 부트 스트랩을 사용하고 있습니다). 그러나 나는 이것을 합리적인 방법으로 어떻게 할 수 있습니까? 지금까지 나는 가지고있다 :

1. nav을 모든 템플릿으로 이동하고 전체를 복사한다 (DRY, 추한 것은 아니다).
2. 값 대신 키 (예 : , <a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a>)를 사용하십시오. 이것은 더 좋지만, 1 변수의 데이터를 저장하기 위해 N 변수를 만들어야한다는 것은 여전히 ​​성가시다.
3. 컨트롤러에 nav을 만듭니다. 즉, { 'Home': {link: '/', active: false}, 'About: {link: '/about', active: true} } 또는 이와 비슷한 값을 전달합니다. 논리가없는 템플릿의 반대 문제가 있기 때문에 나는 이것을 싫어한다. 이제 저는 HTML-ful 컨트롤러를 가지고 있습니다 ...

위의 옵션이 주어지면 나는 (2) 가장 좋습니다. 그러나 내가 선호하는 것은 같은 확인하는 하나의 변수가 몇 가지 방법입니다 :이 최대 모든 콧수염 전문가의 시간을 제공 확신

// 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> 

을 --- 어떤 대처하는 가장 좋은 방법입니다 그것?

Answer 1

바닐라 콧수염을 사용하여이를 처리 할 방법이 없습니다.

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

(면책 조항 :이처럼 사용할 수 있도록 콧수염을 사용

1가, 도우미 함수를 작성 : 당신은 당신의 JSON 데이터와 템플릿을 깨끗이 사용하자 두 가지 옵션이 있습니다 내가 쓴 가장 좋은 방법은 아마도과부하되고, 그대로 내 머리 위로 중이 도우미가 작동하지 않을 수 있습니다하지만 난 당신이 지점) 다음

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

혼합 된 그 헬퍼하여 JSON 데이터로 얻을 생각을 클릭하면 render을 호출 할 때마다 헬퍼가 추가됩니다. class="" 부분을 도우미 외부에두면 활성 부분에 대한 "논리"를 유지하면서 각 메뉴 항목에 여러 개의 다른 클래스를 가질 수 있습니다.

2- 스위치를 Handlebars으로 전환하면 이러한 종류의 기본 논리를 사용할 수 있습니다. Handlebars는 Mustache의 상위 집합이며, 바닐라 뮈 스ache에서 작동하는 항목이 직접 Handlebars에서 작동하므로 업그레이드가 쉽습니다. 일단 Handlebars와 함께 작동하도록 템플릿을 업그레이드하고 수정하면 되돌릴 필요가 없다는 점에주의하십시오.

Answer 2

방금이 게시물을 작성했습니다. here 또는 배너를 클릭

바닐라 콧수염과 NodeJS와 함께이 작업을 수행하는 기본적인 아이디어는 그래서 같다 : 각각 별도의 경로가 다른 콧수염 변수를 전송하는 방법

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"', 
    }); 
}); 

알 수 있습니다.사용자가/Portfolio로 이동하면 {{{Portfolio}}} 변수가 존재하지만 {{{Blog}}} 변수는 존재하지 않습니다. 이 아이디어를 사용

는

, 그래서 같이 당신의 탐색 링크를 설정 :

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

가 .current 클래스 이제 링크가 만들어진 라우팅 호출에 따라 강조 표시됩니다

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

을 만듭니다.