[英]Accessing Express.js local variables in client side JavaScript
好奇,如果我這樣做,如果不是你們怎么會這樣做。
我有一個Jade模板需要呈現從MongoDB數據庫中檢索的一些數據,我還需要在客戶端JavaScript文件中訪問該數據。
我正在使用Express.js並將數據發送到Jade模板,如下所示:
var myMongoDbObject = {name : 'stephen'};
res.render('home', { locals: { data : myMongoDbObject } });
然后在home.jade里面,我可以做以下事情:
p Hello #{data.name}!
寫出:
Hello stephen!
現在我想要的是也可以訪問客戶端JS文件中的這個數據對象,這樣我就可以在按下按鈕之前操作對象,然后再將其發回服務器以更新數據庫。
我已經能夠通過在Jade模板中的隱藏輸入字段中保存“data”對象,然后在我的客戶端JS文件中獲取該字段的值來實現此目的。
在home.jade里面
- local_data = JSON.stringify(data) // data coming in from Express.js
input(type='hidden', value=local_data)#myLocalDataObj
然后在我的客戶端JS文件中,我可以像這樣訪問local_data:
在myLocalFile.js中
var localObj = JSON.parse($("#myLocalDataObj").val());
console.log(localObj.name);
然而,這個字符串化/解析業務感覺很亂。 我知道我可以將我的數據對象的值綁定到我的Jade模板中的DOM對象,然后使用jQuery獲取這些值,但是我想要訪問從我的客戶端JS中的Express返回的實際Object。
我的解決方案是否是最佳的,您將如何實現這一目標?
渲染完成后,只有呈現的HTML才會發送到客戶端。 因此,不再有可用的變量。 你能做什么,而不是在輸入元素中寫入對象輸出對象作為呈現的JavaScript:
script(type='text/javascript').
var local_data =!{JSON.stringify(data)}
編輯:顯然Jade在第一個右括號后需要一個點。
我做的有點不同。 在我的控制器中,我這樣做:
res.render('search-directory', {
title: 'My Title',
place_urls: JSON.stringify(placeUrls),
});
然后在我的jade文件中的javascript中我使用它如下:
var placeUrls = !{place_urls};
在這個例子中,它用於twitter bootstrap typeahead插件。 如果需要,您可以使用這樣的東西來解析它:
jQuery.parseJSON( placeUrls );
另請注意,您可以省略本地人:{}。
使用Jade模板:
如果要在包含的靜態HTML文件上面插入@Amberlamps代碼片段,請記住指定! 5 ,在頂部,以避免你的樣式被破壞,在views / index.jade中 :
!!! 5
script(type='text/javascript')
var local_data =!{JSON.stringify(data)}
include ../www/index.html
這將在實際的靜態HTML頁面加載之前傳入local_data變量,以便變量從一開始就全局可用。
Serverside(使用Jade模板引擎) - 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'));
您不需要在render調用中傳遞locals變量,locals變量是globals。 在你的哈巴狗文件調用中不要放置鍵表達式,例如#{}
。 只需使用類似: base(href=base.url)
其中base.url
是app.locals.base = { url:'/' };
你聽說過socket.io嗎? (http://socket.io/)。 從express訪問對象的一種簡單方法是在node.js和你的javascript之間打開一個套接字。 這樣,數據可以輕松傳遞到客戶端,然后使用javascript輕松操作。 該代碼將不必太大,簡直就是一個socket.emit()
從node.js中和socket.on()
從客戶端。 我認為這是一個有效的解決方案!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.