क्लाइंट साइड में Express.js स्थानीय चर का उपयोग जावास्क्रिप्ट

Question

उत्सुक अगर मैं यह सही कर रहा हूं और यदि नहीं, तो आप लोग इस बात से कैसे संपर्क करेंगे।

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

मैं Express.js उपयोग कर रहा हूँ और इस प्रकार जेड टेम्पलेट को डाटा भेजने:

p Hello #{data.name}! 

:

var myMongoDbObject = {name : 'stephen'}; 
res.render('home', { locals: { data : myMongoDbObject } }); 

फिर अंदर की home.jade मैं जैसे काम कर सकें जो लिखता है:

Hello stephen! 

अब मैं चाहता हूं कि मैं क्या चाहता हूं o क्लाइंट साइड जेएस फ़ाइल के अंदर इस डेटा ऑब्जेक्ट तक पहुंच है, इसलिए मैं डेटाबेस को अपडेट करने के लिए सर्वर पर वापस पोस्ट करने से पहले एक बटन क्लिक करने पर ऑब्जेक्ट में हेरफेर कर सकता हूं।

मैं जेड टेम्पलेट में एक छिपे हुए इनपुट फ़ील्ड के अंदर "डेटा" ऑब्जेक्ट को सहेजकर और फिर अपने क्लाइंट-साइड जेएस फ़ाइल के अंदर उस फ़ील्ड का मान लाकर इसे पूरा करने में सक्षम हूं।

अंदर मेरे मुवक्किल की ओर जे एस फ़ाइल में

- local_data = JSON.stringify(data) // data coming in from Express.js 
input(type='hidden', value=local_data)#myLocalDataObj 

फिर home.jade मैं बहुत तरह local_data पहुँच सकते हैं:

अंदर myLocalFile.js

var localObj = JSON.parse($("#myLocalDataObj").val()); 
console.log(localObj.name); 

हालांकि इस स्ट्रिंग/पार्सिंग व्यवसाय गन्दा लगता है। मुझे पता है कि मैं अपने जेड टेम्पलेट में डीओएम ऑब्जेक्ट्स में अपने डेटा ऑब्जेक्ट के मानों को जोड़ सकता हूं और फिर उन मानों को jQuery का उपयोग करके ला सकता हूं, लेकिन मैं अपने क्लाइंट साइड जेएस में एक्सप्रेस से वापस आने वाले वास्तविक ऑब्जेक्ट तक पहुंच प्राप्त करना चाहता हूं।

क्या मेरा समाधान इष्टतम है, आप लोग इसे कैसे पूरा करेंगे?

Answer 1

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

script(type='text/javascript'). 
    var local_data =!{JSON.stringify(data)} 

संपादित करें: जाहिर है जेड पहले समापन कोष्ठक के बाद एक बिंदु की आवश्यकता है।

Answer 2

क्या आपने socket.io के बारे में सुना है? (Http://socket.io/)। एक्सप्रेस से ऑब्जेक्ट तक पहुंचने का एक आसान तरीका node.js और आपके जावास्क्रिप्ट के बीच सॉकेट खोलना होगा। इस तरह डेटा को क्लाइंट साइड में आसानी से पारित किया जा सकता है और फिर आसानी से जावास्क्रिप्ट का उपयोग करके छेड़छाड़ की जा सकती है। कोड को node.js से socket.emit() और क्लाइंट से socket.on() से अधिक नहीं होना चाहिए। मुझे लगता है कि यह एक प्रभावी समाधान होगा!

Answer 3

मैं इसे थोड़ा अलग करता हूं।मेरी contoller में मैं यह कर:

res.render('search-directory', { 
    title: 'My Title', 
    place_urls: JSON.stringify(placeUrls), 
}); 

और फिर मेरी जेड फ़ाइल में जावास्क्रिप्ट मैं इसे इस तरह का प्रयोग:

var placeUrls = !{place_urls}; 

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

jQuery.parseJSON(placeUrls); 

सूचना आप स्थानीय लोगों को बाहर छोड़ सकते हैं कि: {}।

Answer 4

जेड templating का उपयोग करना:

आप एक शामिल स्थिर HTML फ़ाइल ऊपर कोड की @Amberlamps स्निपेट सम्मिलित रहे हैं, तो निर्दिष्ट करने के लिए याद !!!

!!! 5 
script(type='text/javascript') 
    var local_data =!{JSON.stringify(data)} 

include ../www/index.html 

यह, इससे पहले कि वास्तविक स्थिर HTML पृष्ठ लोड आपके local_data चर में पारित करेंगे ताकि चर रहा है: 5 शीर्ष पर, अपने स्टाइल टूट रहा है, में देखा गया/index.jade से बचने के लिए शुरुआत से वैश्विक स्तर पर उपलब्ध है।

serverside (का उपयोग करते हुए जेड templating इंजन) - server.js:

app.set('views', __dirname + '/views'); 
app.set('view engine', 'jade'); 

app.get('/', ensureAuthenticated, function(request, response){ 
    response.render('index', { data: {currentUser: request.user.id} }); 
}); 

app.use(express.static(__dirname + '/www')); 

Answer 5

आप रेंडर कॉल में स्थानीय लोगों चर पारित करने के लिए की जरूरत नहीं है, स्थानीय लोगों चर वैश्विक हैं। अपने पग फ़ाइल कॉल पर कुंजी अभिव्यक्ति नहीं डालते हैं उदाहरण #{}। वैसे ही जैसे कुछ का उपयोग करें: base(href=base.url)

जहां base.urlapp.locals.base = { url:'/' };