लॉजिक-कम टेम्पलेट इंजन में एनएवी-बार कैसे बनाना है जैसे मूंछ

Question

मैं तर्क-कम temlpates के पीछे अवधारणा को समझने की कोशिश कर रहा हूं, लेकिन मैं खुद को एक दीवार मार रहा हूं।

मैं एक साधारण नेविगेशन बार को लागू करना चाहता हूं, उदा। प्रत्येक पृष्ठ के शीर्ष पर "होम, के बारे में, संपर्क करें" लिंक, और "वर्तमान" को एक अलग वर्ग (मैं बूटस्ट्रैप का उपयोग कर रहा हूं) के साथ हाइलाइट किया जाना चाहिए। लेकिन मैं इसे एक समझदार फैशन में कैसे कर सकता हूं? अब तक मेरे पास है:

1. नौसेना को प्रत्येक टेम्पलेट पर ले जाएं, और पूरी चीज को कॉपी करें (DRY, बदसूरत नहीं)।
2. मानों की बजाय कुंजी का उपयोग करें, यानी <a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a> के साथ। यह बेहतर है, लेकिन अभी भी कष्टप्रद है कि मुझे 1-चरणीय डेटा रखने के लिए एन चर बनाना है।
3. नियंत्रक में नेविगेशन बनाएं, यानी { '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 पर स्विच करें जो इस तरह के मूल तर्क के लिए अनुमति देता है। हैंडलबार मूंछ का एक सुपरसेट है, वेनिला मूंछ पर काम करने वाली सामग्री सीधे हैंडलबार्स में काम करेगी ताकि उन्नयन आसान हो। सावधान रहें, कि एक बार जब आपने हैंडलबार्स के साथ काम करने के लिए अपने टेम्पलेट्स को अपग्रेड और संशोधित किया है तो कोई मोड़ नहीं है।

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}}} चर पर पोर्टफोलियो/पोर्टफोलियो पर जाता है लेकिन {{{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; 
} 

अब लिंक मार्ग बनाया कॉल पर निर्भर हाइलाइट किया जाएगा बनाएँ।