あなたは本当に近いです。唯一の問題は、変数の内部、つまり#{this_stuff}すべてがgooglejade のコンテキストで実行されることです (これはクライアント側であるため、オブジェクトはありません)。
ここでは、サーバー側とクライアント側の 2 つのまったく異なる JavaScript 環境を扱っているため、少し注意が必要です。
したがって、クライアント側で実行される JavaScript コードに、jade のサーバー側変数を出力する必要があります。
関連する注意事項として、スクリプト ブロックで Jade 変数構文を使用できますが、他のこと (ループなど) を行うことはできません。
まず、すべてのscriptタグがjsブロック内にあるようにクリーンアップして (例の KeystoneJS テンプレートを使用していると仮定すると、<body>タグの下部になります)、それらのプロファイルが正しく生成されるようにします。
block js
script(src='https://maps.googleapis.com/maps/api/js?key=<GOOGLE_API_KEY>&sensor=false')
script.
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.0360272, 3.7359072),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialise);
if data.profiles
each profile in data.profiles
script.
new google.maps.Marker({
position: new google.maps.LatLng(#{profile.address.geo[1]}, #{profile.address.geo[0]}),
map: map,
title: "#{profile.name.full}"
});
block content
.container
div(id="map-canvas", style="width:100%; height:700px;")
これは近づいています (そして Jade はあなたが今期待しているものを生成します)、関数が実行される前にマーカーをマップに追加する可能性があるため、(まだ) 機能しません。initialize
また、値をエスケープしていないため"、名前に文字が含まれていると構文エラーが発生します。
より堅牢な方法は、クライアント側の配列にデータを入力し、マップが作成された後にそれをループすることです。JSON.stringifyまた、値が適切にエスケープされていることを確認するためにも使用します。
block js
script(src='https://maps.googleapis.com/maps/api/js?key=<GOOGLE_API_KEY>&sensor=false')
script.
var map,
profiles = [];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.0360272, 3.7359072),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
for (var i = 0; i < profiles.length; i++) {
new google.maps.Marker({
position: new google.maps.LatLng(profiles[i].geo[1], profiles[i].geo[0]),
map: map,
title: profiles[i].name
});
}
}
google.maps.event.addDomListener(window, 'load', initialise);
if data.profiles
each profile in data.profiles
script.
profiles.push({
geo: !{JSON.stringify(profile.address.geo)},
name: !{JSON.stringify(profile.name.full)}
});
block content
.container
div(id="map-canvas", style="width:100%; height:700px;")
JSON がエスケープされないように !{variable} への変更に注意してください
最後に、jade テンプレートではなく、ビューのprofilesルート ファイルで配列を構築することをお勧めします。.jsこれは非常にクリーンで、ページに大量の<script>タグを配置することはありません。
したがって、あなたのルートは次のようになります（私はあなたにアイデアを与えるためにかなりのことを想定しており、アンダースコアを使用してバニラJavaScriptよりもコードをきれいにしています）
var keystone = require('keystone'),
_ = require('underscore');
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res),
locals = res.locals;
// Load the profiles
view.query('profiles', keystone.list('Profile').model.find());
// Create the array of profile markers
view.on('render', function(next) {
locals.profileMarkers = locals.profiles ? _.map(locals.profiles, function(profile) {
return { geo: profile.address.geo, name: profile.name.full };
}) : [];
next();
});
// Render the view
view.render('profiles');
}
次に、ビュー テンプレートで:
block js
script(src='https://maps.googleapis.com/maps/api/js?key=<GOOGLE_API_KEY>&sensor=false')
script.
var profileMarkers = !{JSON.stringify(profileMarkers)},
map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.0360272, 3.7359072),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
_.each(profileMarkers, function(profile) {
new google.maps.Marker({
position: new google.maps.LatLng(profile.geo[1], profile.geo[0]),
map: map,
title: profile.name
});
});
}
google.maps.event.addDomListener(window, 'load', initialise);
block content
.container
div(id="map-canvas", style="width:100%; height:700px;")