Bagaimana cara melewatkan variabel dari file template giok ke file script?

Saya mengalami masalah dengan variabel (config) yang dideklarasikan dalam file template giok (index.jade) yang tidak diteruskan ke file javascript, yang kemudian membuat javascript saya macet. Ini file (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')

Berikut adalah bagian dari app.js saya (sisi server):

  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));

Dan berikut ini adalah bagian dari file javascript saya yang rusak (public / javascripts / app.js):

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

Saya menjalankan situs dalam mode pengembangan (NODE_ENV = pengembangan) di localhost (mesin saya sendiri). Saya menggunakan node-inspector untuk debugging, yang memberi tahu saya bahwa variabel config tidak ditentukan di public / javascripts / app.js.

Ada ide ?? Terima kasih!!

Ini agak terlambat tapi ...

script.
  loginName="#{login}";

Ini berfungsi dengan baik di skrip saya. Di Express, saya melakukan ini:

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

Saya kira giok terbaru berbeda?

Merc.

edit: ditambahkan "." setelah skrip untuk mencegah peringatan Jade.

!{}adalah untuk interpolasi kode yang tidak lolos , yang lebih cocok untuk objek

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>

Idenya adalah untuk mencegah penyerang untuk:

1. Keluar dari variabel: JSON.stringifykeluar dari tanda kutip
2. Keluar dari tag skrip: jika konten variabel (yang mungkin tidak dapat Anda kendalikan jika berasal dari database misalnya) memiliki </script>string, pernyataan ganti akan menanganinya

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

#{}adalah untuk interpolasi string yang lolos , yang hanya cocok jika Anda bekerja dengan string. Itu tidak bekerja dengan objek

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

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

Dalam kasus saya, saya mencoba untuk mengirimkan objek ke template melalui rute ekspres (mirip dengan pengaturan OP). Kemudian saya ingin meneruskan objek itu ke dalam fungsi yang saya panggil melalui tag skrip di template pug. Meskipun jawaban lagginreflex membuat saya dekat, saya berakhir dengan yang berikut:

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

Ini memastikan objek diteruskan seperti yang diharapkan, daripada perlu deserialisasi dalam fungsinya. Juga, jawaban lain tampaknya berfungsi dengan baik dengan primitif, tetapi ketika array dll diteruskan bersama dengan objek mereka diurai sebagai nilai string.

Jika Anda seperti saya dan Anda sering menggunakan metode penerusan variabel ini, berikut adalah solusi kode tanpa penulisan.

Di rute node.js Anda, teruskan variabel dalam objek yang disebut window, seperti ini:

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

Kemudian di file layout pug / jade Anda (tepat sebelum block content), Anda mengeluarkannya seperti ini:

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

Karena file layout.pug saya dimuat dengan setiap file pug, saya tidak perlu 'mengimpor' variabel saya berulang kali.

Dengan cara ini semua variabel / objek yang diteruskan ke window'secara ajaib' berakhir di windowobjek sebenarnya dari browser Anda di mana Anda dapat menggunakannya di Reactjs, Angular, ... atau vanilla javascript.

Begini cara saya membahas ini (menggunakan turunan MEAN)

Variabel saya:

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

Pertama, saya harus memastikan bahwa variabel config yang diperlukan telah diteruskan. MEAN menggunakan paket node nconf, dan secara default diatur untuk membatasi variabel mana yang diteruskan dari lingkungan. Saya harus memperbaikinya:

config / config.js:

asli:

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

setelah modifikasi:

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

Sekarang saya dapat mengatur variabel saya seperti ini:

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

Catatan: Saya menyetel ulang "indikator heirarki" menjadi "__" (garis bawah ganda) karena defaultnya adalah ":", yang membuat variabel lebih sulit disetel dari bash. Lihat posting lain di utas ini.

Sekarang bagian giok: Selanjutnya nilai-nilai perlu dirender, sehingga javascript dapat mengambilnya di sisi klien. Cara mudah untuk menulis nilai ini ke file indeks. Karena ini adalah aplikasi satu halaman (bersudut), halaman ini selalu dimuat terlebih dahulu. Saya pikir idealnya ini harus berupa file penyertaan javascript (hanya untuk menjaga kebersihan), tetapi ini bagus untuk demo.

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};

Di html yang saya berikan, ini memberi saya skrip kecil yang bagus:

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

Dari titik ini, mudah bagi sudut untuk menggunakan kode tersebut.

Lihat pertanyaan ini: JADE + EXPRESS: Iterasi objek dalam kode JS sebaris (sisi klien)?

Saya mempunyai masalah yang sama. Jade tidak meneruskan variabel lokal di (atau melakukan template sama sekali) ke skrip javascript, Jade hanya meneruskan seluruh blok sebagai teks literal. Jika Anda menggunakan 'alamat' variabel lokal dan 'port' di file Jade Anda di atas tag skrip, variabel tersebut akan muncul.

Solusi yang memungkinkan tercantum dalam pertanyaan yang saya tautkan di atas, tetapi Anda dapat: - meneruskan setiap baris sebagai teks yang tidak lolos (! = Di awal setiap baris), dan cukup letakkan "-" sebelum setiap baris javascript yang menggunakan variabel lokal, atau: - Meneruskan variabel melalui elemen dom dan mengakses melalui JQuery (jelek)

Apakah tidak ada cara yang lebih baik? Sepertinya pembuat Jade tidak menginginkan dukungan multiline javascript, seperti yang ditunjukkan oleh utas ini di GitHub: https://github.com/visionmedia/jade/pull/405