सर्वर और क्लाइंट पर हैंडलबर्स.जेएस के साथ नोड.जेएस

मेरे पास एक्सप्रेसज और हैंडलबार्स का उपयोग टेम्पलेट इंजन के रूप में नोड.जेएस में एक ऐप है।सर्वर और क्लाइंट पर हैंडलबर्स.जेएस के साथ नोड.जेएस

एक्सप्रेसज लेआउट का उपयोग करता है और फिर दृश्य प्रस्तुत करता है। लेआउट (layout.hbs) इस तरह दिखता है:

<!doctype html> 
<html lang="en"> 
    <head> 
    </head> 
    <body> 
    {{{body}}} 
    </body> 
</html>

जब आप एक मार्ग का उपयोग {{{body}}} Node.js भीतर, बदल दिया जाता है सर्वर साइड। उदाहरण के लिए:

app.get('/', function(req, res){ 
    res.render('index'}) 
})

index.hbs की सामग्री के साथ {{{body}}} टैग को प्रतिस्थापित करेगा।

अब, क्लाइंट साइड पर मैं बैकबोन.जेएस का उपयोग कर रहा हूं और बैकबोन के माध्यम से नियंत्रित विचारों के लिए हैंडलबार्स का उपयोग करना चाहता हूं। समस्या यह है कि क्योंकि इन पृष्ठों को हैंडलबार्स के माध्यम से पहले से ही प्रस्तुत किया जाता है, जब मैं इसके अंदर हैंडलबार्स का उपयोग करने का प्रयास करता हूं (या हैंडलबार्स के हैंडलबार्स) यह काम नहीं करता है। कोई त्रुटि नहीं है, यह बस डेटा के साथ टैग को प्रतिस्थापित नहीं करता है।

क्या किसी ने इससे पहले किसी का सामना किया है या कोई विचार है?

धन्यवाद!

स्रोत

2012-04-06 dzm

यूप, यह एक चिपचिपा समस्या है --- शैल स्क्रिप्ट्स में उद्धरण समस्याओं की तरह जो उद्धृत उद्धरणों के चूहों के घोंसले बन जाते हैं।

मेरा समाधान क्लाइंट के लिए हैंडलबार आधारित टेम्पलेट आउटपुट करने के लिए एक्सप्रेसजे (सर्वर-साइड) में जेड (ला लाम) का उपयोग करना है। इस तरह, सर्वर एक वाक्यविन्यास (जेड) का उपयोग करता है, और क्लाइंट दूसरे (हैंडलबार्स) का उपयोग करता है। मैं आपके जैसे ही चौराहे पर हूं, इसलिए मुझे एक ही चुनौती है।

बेशक, जेड आवश्यक नहीं है (हालांकि यह एक्सप्रेसजे के लिए तैयार है)। आप सर्वर के लिए किसी भी (गैर-हैंडलबार) टेम्पलेट इंजन का चयन कर सकते हैं, और/या आप सर्वर पर हैंडलबार का उपयोग कर सकते हैं, जो आपके गैर-हैंडलबार्स क्लाइंट पर templating --- जब तक आपके चुने हुए templating इंजन के दो वाक्यविन्यास नहीं करते हैं टकराते रहते हैं। चूंकि मैं क्लाइंट पर एम्बरजे का उपयोग कर रहा हूं और यह हैंडलबार सिंटैक्स (डिफ़ॉल्ट रूप से) का उपयोग करता है, इसलिए मैं क्लाइंट पर एम्बरजे + हैंडलबार सिंटैक्स का उपयोग करना पसंद करता हूं। तो expressjs + जेड सर्वर के लिए एक प्राकृतिक फिट बन गया।

स्रोत

2012-04-06 08:19:23 occam

पर्याप्त मेला, लगता है जैसे मुझे एक अलग टेम्पलेट इंजन का उपयोग करना होगा - धन्यवाद! – dzm

आपका स्वागत है। मदद करने के लिए खुश। – occam

हालांकि जेड का उपयोग समाधान लगता है, मुझे विश्वास नहीं है। अगर आपको अन्य समाधान मिल जाए तो मैं बहुत खुश रहूंगा ... क्योंकि अब मुझे विश्वास है कि जेड और एंगुलर.जेएस का उपयोग करके यह मेरी राहत है! –

बेकार आत्म-प्रचार!

मैं इस एक ही क्लाइंट/सर्वर साझा करने बात करना चाहता था, तो मैं एक छोटे से NPM पैकेज लिखा सहायता करने के लिए:

node-handlebars-precompiler

मैं इसे आदेश के आधार पर कुछ घंटों में मार पड़ी है wycats 'हैंडलबार्स repo में लाइन कंपाइलर। यह दुनिया में सबसे बड़ा कोड नहीं है, लेकिन यह मेरे लिए बहुत अच्छी तरह से काम कर रहा है।

संपादित करें: मैं अब इस पैकेज को बनाए रखने वाला नहीं हूं। यदि आप लेना चाहते हैं, तो कृपया गितूब के माध्यम से मुझसे संपर्क करें। मैं मुख्य रूप से जेड टेम्पलेट्स का उपयोग करता हूं, इसलिए यह मेरे लिए रखरखाव के रूप में जारी रखने के लिए समझ में नहीं आता है।

स्रोत

2012-04-23 20:52:21

मैंने सर्वर-साइड टेम्पलेट्स के माध्यम से क्लाइंट-साइड टेम्पलेट्स पास करके इस के आसपास काम किया है।

readTemplates(function(err, clientTemplates) { 
    res.render("page", { 
    clientTemplates: clientTemplates; 
    }); 
});

तो सर्वर साइड पर एक सरणी के लिए अपने सभी क्लाइंट साइड टेम्पलेट्स पढ़ सकते हैं और अपने कार्य प्रस्तुत करने के लिए यह सर्वर साइड

को पारित अपने मार्ग हैंडलर में की तरह कुछ करना

और फिर में layout.hbs:

{{#each clientTemplates}} 
<script type="text/handlebars id="{{this.filename}}" > 
{{{this.template}}} 
</script> 
{{/each}}

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

हाँ, यह बेकार है।

मुझे लगता है कि हमें इसके लिए हैंडलबार्स/एक्सप्रेस/कनेक्ट हेल्पर लिखना चाहिए।

स्रोत

2012-07-14 08:30:39 Epeli

आपको पूर्व-संकलित क्लाइंट टेम्पलेट्स का उपयोग करना चाहिए। वे तेजी से निष्पादन कर रहे हैं और आपको सर्वर और क्लाइंट पर एक ही टेम्पलेट भाषा का उपयोग करने की अनुमति देते हैं।

स्थापित हैंडल विश्व स्तर पर npm install handlebars -g
precompile अपने टेम्पलेट handlebars client-template1.handlebars -f templates.js
शामिल templates.js <script src="templates.js"></script>
टेम्पलेट var html = Handlebars.templates["client-template1"](context);

https://stackoverflow.com/a/13884587/8360

स्रोत

2012-12-14 18:56:54

यह स्वीकार किए गए उत्तर की तुलना में एक बेहतर समाधान है, आईएमओ – Paul

अब भी आसान है https://npmjs.org/package/grunt-contrib-handlebars – slf

यह है करने के लिए एक आसान तरीका है निष्पादित बस ऐप के लिए हैंडलबार्स फ़ाइल में {{ से पहले \ समाप्त करें। उदाहरण के लिए:

<script type="text/x-template" id="todo-item-template"> 
<div class="todo-view"> 
    <input type="checkbox" class="todo-checkbox" \{{checked}}> 
    <span class="todo-content" tabindex="0">\{{text}}</span> 
</div> 

<div class="todo-edit"> 
    <input type="text" class="todo-input" value="\{{text}}"> 
</div> 

<a href="#" class="todo-remove" title="Remove this task"> 
    <span class="todo-remove-icon"></span> 
</a>

ऊपर कोड {{..}} संरक्षित टैग के साथ ग्राहक पर रेंडर किया जाएगा।

स्रोत

2013-09-03 22:57:21

वास्तव में? अरे, मेरी इच्छा है कि मैं एक साल पहले जानता था। यह अच्छा और सरल है। –

एक इलाज की तरह काम करता है धन्यवाद! –

यह बहुत अच्छा काम करता है, काश वे दस्तावेज में डाल दिया था ... या शायद मैं इसे याद किया। – skud

आपके पास 2 विकल्प हैं।

1) भागने मूंछें

<script type="text/x-handlebars" data-hbs="example"> 
    <p>\{{name}}</p> 
</script>

2) precompile

इससे पहले कि यह ग्राहक के लिए चला जाता है इस सर्वर पर टेम्पलेट संकलन होगा: दूसरी जाना सबसे अच्छा तरीका है। यह टेम्पलेट को उपयोग करने के लिए तैयार करेगा और ब्राउज़र पर बोझ कम कर देगा।

स्रोत

2014-08-08 21:12:28 jordanb

मुझे प्रीकंपिलेशन समाधान पसंद नहीं आया (क्योंकि मैं उसी फ़ाइल में टेम्पलेट्स को परिभाषित करना चाहता हूं जहां मैं उनका उपयोग करूंगा) और न ही बेवकूफ \{{ एस्केप समाधान (क्योंकि इसे पूर्ण हैंडलबर्स कंपाइलर और अधिक जावास्क्रिप्ट कोड की आवश्यकता है) इसलिए मैं

1) सर्वर विन्यास पर "टेम्पलेट" नामक एक नया सहायक रजिस्टर

var hbs = require('hbs'); 
hbs.registerHelper("template", function(key, options){ 
    var source = options.fn().replace("\\{{", "{{"); 
    var ret = 
    '<script>\n' + 
     key + ' = function(opt){\n' + 
      'return Handlebars.template(' + hbs.handlebars.precompile(source) + ')(opt);\n' + 
     '}\n' + 
    '</script>'; 
    return ret; 
});

2) अपने क्लाइंट साइड वेबपेज में कहीं भी इसका इस्तेमाल (: एक संकर समाधान Handlebars 'सहायकों का उपयोग करता है के साथ आया था \{{ से बचें एफ या क्लाइंट साइड मापदंडों)

{{#template "myTemplate"}} 
    <div> 
     <p>Hello \{{this.name}}!</p> 
    </div> 
{{/template}}

(सर्वर यह कुछ इस तरह) में precompile जाएगा

<script> 
    myTemplate = function(opt){ 
     return Handlebars.template(/* HBS PRECOMPILATED FUNCTION */)(opt); 
    } 
</script>

3) सीधे शब्दों में समारोह जहां आप इसे क्लाइंट साइड में आवश्यकता फोन जावास्क्रिप्ट

var generatedHtml = myTemplate("world"); // = <div><p>Hello world!</p></div> 
$("#myDiv").html(generatedHtml);   // or whatever

स्रोत

2016-02-20 01:44:19 Oneiros

सर्वर और क्लाइंट पर हैंडलबर्स.जेएस के साथ नोड.जेएस

उत्तर

संबंधित मुद्दे