jadeテンプレートファイルからスクリプトファイルに変数を渡す方法は？

javascriptファイルに渡されないjadeテンプレートファイル（index.jade）で宣言された変数（config）で問題が発生し、JavaScriptがクラッシュします。これがファイル（views / index.jade）です。

h1 #{title}

script(src='./socket.io/socket.io.js')
script(type='text/javascript')
  var config = {};
  config.address = '#{address}';
  config.port = '#{port}';
script(src='./javascripts/app.js')

これが私のapp.js（サーバー側）の一部です。

  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.set('address', 'localhost');
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', function(req, res){
  res.render('index', {
    address: app.settings.address,
    port: app.settings.port
});
});

if (!module.parent) {
  app.listen(app.settings.port);
  console.log("Server listening on port %d",
app.settings.port);
}

// Start my Socket.io app and pass in the socket
require('./socketapp').start(io.listen(app));

そして、これがクラッシュする私のjavascriptファイルの一部です（public / javascripts / app.js）：

(function() {
        var socket = new io.Socket(config.address, {port: config.port, rememberTransport: false});

私はローカルホスト（自分のマシン）の開発モード（NODE_ENV = development）でサイトを実行しています。node-inspectorをデバッグに使用しています。これにより、config変数がpublic / javascripts / app.jsで未定義であることがわかりました。

何か案は？？ありがとう!!

それはだ少し遅れてますが...

script.
  loginName="#{login}";

これは私のスクリプトでは問題なく機能しています。Expressでは、私はこれをやっています：

exports.index = function(req, res){
  res.render( 'index',  { layout:false, login: req.session.login } );
};

最新のヒスイは違うのかな？

Merc。

編集：「。」を追加 ジェイド警告を防ぐためのスクリプトの後。

!{}するためのものであるエスケープコードに適して補間、オブジェクト

script var data = !{JSON.stringify(data).replace(/<\//g, '<\\/')}

{ foo: 'bar' }
// becomes:
<script>var data = {"foo":"bar"}</script>

{ foo: 'bar</script><script>alert("xss")//' }
// becomes:
<script>var data = {"foo":"bar<\/script><script>alert(\"xss\")//"}</script>

このアイデアは、攻撃者が次のことを行えるようにすることです。

1. 変数JSON.stringifyから抜け出す：引用符をエスケープする
2. スクリプトタグから抜け出します：変数の内容（例：データベースからのものであるかどうかを制御できない場合があります）に</script>文字列がある場合、replaceステートメントがそれを処理します

https://github.com/pugjs/pug/blob/355d3dae/examples/dynamicscript.pug

#{}エスケープされた文字列補間用です。文字列を操作している場合にのみ適しています。それは動作しませんオブジェクトと

script var data = #{JSON.stringify(data)}

//=> <script>var data = {&quot;foo&quot;:&quot;bar&quot;}</script>

私の場合、エクスプレスルートを介してオブジェクトをテンプレートに渡そうとしました（OP設定と同様）。次に、そのオブジェクトを、pugテンプレートのスクリプトタグを介して呼び出す関数に渡したかったのです。けれどもlagginreflexの答えは近い私を得た、私は次のようになってしまいました。

script.
    var data = JSON.parse('!{JSON.stringify(routeObj)}');
    funcName(data)

これにより、関数でデシリアライズする必要がなく、オブジェクトが期待どおりに渡されることが保証されました。また、他の回答はプリミティブでうまく機能するように見えましたが、配列などがオブジェクトとともに渡された場合、それらは文字列値として解析されました。

私と同じように、変数を渡すこの方法を頻繁に使用する場合は、以下に書き込みのないコードソリューションを示します。

node.jsルートでwindow、次のようにと呼ばれるオブジェクトに変数を渡します。

router.get('/', function (req, res, next) {
    res.render('index', {
        window: {
            instance: instance
        }
    });
});

次に、pug / jadeレイアウトファイル（の直前block content）で、次のようにそれらを取得します。

if window
    each object, key in window
        script.
            window.!{key} = !{JSON.stringify(object)};

layout.pugファイルが各pugファイルと共にロードされるので、変数を何度も「インポート」する必要はありません。

このようにして、window「魔法のように」渡されたすべての変数/ windowオブジェクトは、ブラウザの実際のオブジェクトになり、Reactjs、AngularなどのバニラJavaScriptで使用できます。

これは私がこれに対処する方法です（MEAN派生物を使用して）

私の変数：

{
  NODE_ENV : development,
  ...
  ui_varables {
     var1: one,
     var2: two
  }
}

最初に、必要な構成変数が渡されていることを確認する必要がありました。MEANはnode nconfパッケージを使用し、デフォルトでは、環境から渡される変数を制限するように設定されています。私はそれを直さなければなりませんでした：

config / config.js：

元の：

nconf.argv()
  .env(['PORT', 'NODE_ENV', 'FORCE_DB_SYNC'] ) // Load only these environment variables
  .defaults({
  store: {
    NODE_ENV: 'development'
  }
});

変更後：

nconf.argv()
  .env('__') // Load ALL environment variables
  // double-underscore replaces : as a way to denote hierarchy
  .defaults({
  store: {
    NODE_ENV: 'development'
  }
});

これで、変数を次のように設定できます。

export ui_varables__var1=first-value
export ui_varables__var2=second-value

注：デフォルトは "："だったため、 "階層インジケーター"を "__"（二重下線）にリセットしました。これにより、bashから変数を設定するのが難しくなります。このスレッドの別の投稿を参照してください。

次にヒスイの部分：次に、JavaScriptがクライアント側で値を取得できるように、値をレンダリングする必要があります。これらの値をインデックスファイルに書き込む簡単な方法。これは1ページのアプリ（angular）であるため、このページが常に最初に読み込まれます。理想的には、これはJavaScriptのインクルードファイルである必要があります（物事をきれいに保つため）が、これはデモに適しています。

app / controllers / index.js：

'use strict';
var config = require('../../config/config');

exports.render = function(req, res) {
  res.render('index', {
    user: req.user ? JSON.stringify(req.user) : "null",
    //new lines follow:
    config_defaults : {
       ui_defaults: JSON.stringify(config.configwriter_ui).replace(/<\//g, '<\\/')  //NOTE: the replace is xss prevention
    }
  });
};

app / views / index.jade：

extends layouts/default

block content
  section(ui-view)
    script(type="text/javascript").
    window.user = !{user};
    //new line here
    defaults = !{config_defaults.ui_defaults};

私のレンダリングされたhtmlでは、これは私に素敵な小さなスクリプトを与えます：

<script type="text/javascript">
 window.user = null;         
 defaults = {"var1":"first-value","var2:"second-value"};
</script>        

この時点から、angularがコードを利用するのは簡単です。

この質問を参照してください：JADE + EXPRESS：インラインJSコード（クライアント側）でオブジェクトを反復処理しますか？

私も同じ問題を抱えています。JadeはJavaScriptのスクリプトにローカル変数を渡さない（またはテンプレート化をまったく行わない）、ブロック全体をリテラルテキストとして渡すだけです。Jadeファイルでスクリプトタグの上のローカル変数「address」と「port」を使用すると、それらが表示されます。

考えられる解決策は上記の質問に記載されていますが、次のいずれかを行うことができます。ローカル変数、または：-DOM要素を介して変数を渡し、JQueryを介してアクセスします（醜い）

より良い方法はありませんか？GadeHubの次のスレッドで示されているように、Jadeの作成者は複数行のJavaScriptサポートを望んでいないようです：https : //github.com/visionmedia/jade/pull/405