ग्राहक पक्ष + सर्वर पक्ष templating, मुझे गलत लगता है, अनुकूलित करने के लिए कैसे?

Question

मैं जो वेब ऐप बना रहा हूं, मैं क्लासिकल एक्सप्रेस + जेड का उपयोग क्लाइंट पेजों को प्रस्तुत करने के लिए करता हूं और कुछ आरईएसटी एपीआई का पर्दाफाश करता हूं (मान लें: "उपयोगकर्ता सूची एपीआई")।

ये ग्राहक पृष्ठ "उपयोगकर्ता सूची" को पुनर्प्राप्त करने और इसे प्रदर्शित करने के लिए प्रदान की गई API का उपयोग करते हैं। इसे प्रदर्शित करने के लिए, डेटा पुनर्प्राप्त होने के बाद, मैं हैंडलबार टेम्पलेट लाइब्रेरी का उपयोग करता हूं।

यह दो टेम्पलेट इंजनों का उपयोग करके, दो बार कोड को पार्स करने, इसे बेहतर बनाने के लिए, मुझे थोड़ा गंदा लगता है?

नोट: मैंने क्लाइंट पेज के भीतर प्रारंभिक डेटा भेजकर इसे एक स्क्रिप्ट वैरिएबल डालने से पहले ही चीज़ को अनुकूलित किया है। यह वैरिएबल तब प्रदर्शित होता है जैसे एपीआई द्वारा प्राप्त डेटा होगा। एपीआई केवल डेटा रीफ्रेश के मामले में उपयोग किया जाता है।

अद्यतन: जेड दोनों सर्वर और क्लाइंट पक्ष का उपयोग करना एक अच्छा विचार है लेकिन कैसे अलग/निर्दिष्ट करना है? प्रस्तुत किए गए टेम्पलेट का हिस्सा हिस्सा पृष्ठ की सेवा करते समय किया जाना चाहिए और ग्राहक द्वारा किस भाग का उपयोग किया जाएगा?

Answer 1

क्लाइंट साइड + सर्वर साइड टेम्पलेटिंग का उपयोग करना बहुत आसान है। जब हम कुछ वेब ऐप्स बना रहे हैं, तो हमें कुछ डेटा प्राप्त करने के लिए AJAX का उपयोग करना चाहिए और इसके साथ निपटने के लिए कॉलबैक फ़ंक्शन का उपयोग करना चाहिए। इसलिए हमें इन डेटा को प्रस्तुत करना चाहिए ग्राहक की ओर।

प्रश्न यह है कि उन्हें क्लाइंट साइड पर कैसे प्रस्तुत किया जाए?

अब हमें केवल क्लाइंट साइड jade.js. की आवश्यकता है।

इस दस्तावेज़ का पालन करें: https://github.com/visionmedia/jade#readme

पहले

git clone https://github.com/visionmedia/jade.git 

दूसरा

$ make jade.js (in fact the project has already compile the file for us) 

so we just need to copy this file to the path that we use. 

तीसरा

read my demo below : 

<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script> 
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script> 
<script type='template' id='test'> 
ul 
    li hello world 
    li #{item} 
    li #{item} 
    li #{item} 
</script> 
<script> 
    var compileText = $("#test").text(); 
    console.log(typeof(compileText)); 
    var fn = jade.compile(compileText , { layout : false }); 
    var out = fn({item : "this is item " }); 
    console.log(out); 
    $("body").append(out); 
</script> 

अब तुम शरीर

hello world 
this is item 
this is item 
this is item 

में उत्पादन परिणाम देख सकते हैं इस डेमो मुझे लगता है कि आप जेड सर्वर साइड और ग्राहक अलग करने के कैसे पता होगा कि पढ़ने के बाद side.If आप समझ सकते हैं जो एक संकलन जेड टेम्पलेट, तो सभी प्रश्न आसान हैं।

शायद आपके पास अब एक और सवाल होगा। * जेड में कुछ जेड टेम्पलेट कोड कैसे लिखें? दस्तावेज़ हमें यह करने का एक तरीका भी प्रदान करता है। यह ट्यूटोरियल आपकी मदद कर सकता है।

index.jade

!!!5 
html 
    head 
    title hello world 
    body 
    ul#list 

    script#list-template(type='template') 
     |- for(var i in data) 
     | li(class='list') \#{ data[i].name } 
     |- } 

index.js

/* you javascript code */ 
var compileText = $('#list-template').text(); 
var compile = jade.compile(compileText , { layout : false }); 

var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }]; 
var outputText = compile(data); 

$("#list").append(outputText); 

Answer 2

http://github.com/flatiron/plates टेम्पलेट इंजन का उपयोग करें जो क्लाइंट साइड और सर्वर दोनों तरफ काम करेगा।

Answer 3

कुछ हफ्ते पहले मैंने हैंडलबार टेम्पलेट्स के लिए क्लाइंट और सर्वर के बीच साझा करने के लिए एक एनपीएम पैकेज लिखा था। यह बहुत बुनियादी है, लेकिन यह अब तक मेरे लिए वास्तव में अच्छी तरह से काम कर रहा है:

https://github.com/jwietelmann/node-handlebars-precompiler

संपादित: मैं अलग से "एचबीएस" का उपयोग कर रहा सर्वर साइड प्रतिपादन के लिए पैकेज के रूप में। जब भी मैं अपने एचबीएस दृश्य अपडेट करता हूं तो प्रीकंपलर सिर्फ मेरी सार्वजनिक जावास्क्रिप्ट निर्देशिका में प्रीकंपिल्ड टेम्पलेट्स प्रदान करता है।