web-dev-qa-db-ja.com

クライアント側JavaScriptでExpress.jsローカル変数にアクセスする

私がこれを正しくやっているかどうか、そしてそうでなければあなたたちがこれに近づく方法に興味があります。

MongoDBデータベースから取得したデータをレンダリングする必要があるJadeテンプレートがあり、クライアント側のJavaScriptファイル内でそのデータにアクセスする必要もあります。

Express.jsを使用して、次のようにJadeテンプレートにデータを送信しています。

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

それからhome.jadeの内部で次のようなことができます：

p Hello #{data.name}!

次のように書きます：

Hello stephen!

これで、クライアント側のJSファイル内でこのデータオブジェクトにもアクセスできるようになり、ボタンをクリックするだけでオブジェクトを操作してから、サーバーにPOSTしてデータベースを更新できます。

これを実現するには、Jadeテンプレートの非表示入力フィールド内に「データ」オブジェクトを保存し、クライアント側の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から返される実際のオブジェクトにアクセスしたいと思います。

私のソリューションは最適ですか、これをどのように達成しますか？

javascriptnode.jsexpresspug
67
braitsch

レンダリングが完了すると、レンダリングされたHTMLのみがクライアントに送信されます。したがって、変数は使用できなくなります。できることは、入力要素にオブジェクトを書き込む代わりに、レンダリングされたJavaScriptとしてオブジェクトを出力することです。

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

編集：どうやらジェイドは最初の閉じ括弧の後にドットを必要とするようです。

71
Amberlamps

私はそれを少し違ったやり方でしています。私のコントローラーでこれを行います：

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

そして、jadeファイルのjavascriptで次のように使用します。

var placeUrls = !{place_urls};

この例では、Twitter bootstrap typeaheadプラグインに使用されています。必要に応じて、このようなものを使用して解析できます。

jQuery.parseJSON( placeUrls );

また、地元の人を除外できることに注意してください：{}。

13
jabbermonkey

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変数を渡し、変数が最初からグローバルに利用できるようにします。

サーバーサイド（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'));
3
AmpT

レンダーコールでローカル変数を渡す必要はありません。ローカル変数はグローバル変数です。あなたのパグファイルの呼び出しでは、キー式、例えば_#{}_を置かないでください。次のようなものを使用してください：base(href=base.url)

ここで_base.url_は_app.locals.base = { url:'/' };_です

1
Adrian Miranda

Socket.ioについて聞いたことがありますか？ （http://socket.io/）。 Expressからオブジェクトにアクセスする簡単な方法は、node.jsとjavascriptの間にソケットを開くことです。このようにして、データをクライアント側に簡単に渡してから、javascriptを使用して簡単に操作できます。コードはそれほど多くなくてもかまいません。単にnode.jsからのsocket.emit()とクライアントからのsocket.on()です。それは効果的な解決策だと思います！

0
Alex Roe