Jak przekazać zmienną z pliku szablonu jade do pliku skryptu?

Mam problem ze zmienną (config) zadeklarowaną w pliku szablonu Jade (index.jade), która nie jest przekazywana do pliku javascript, co powoduje awarię mojego javascript. Oto plik (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')

Oto część mojego pliku app.js (po stronie serwera):

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

A oto część mojego pliku javascript, który ulega awarii (public / javascripts / app.js):

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

Prowadzę witrynę w trybie programistycznym (NODE_ENV = programowanie) na hoście lokalnym (mój własny komputer). Używam inspektora węzłów do debugowania, który powiedział mi, że zmienna konfiguracyjna jest niezdefiniowana w public / javascripts / app.js.

Jakieś pomysły?? Dzięki!!

Jest to trochę późno, ale ...

script.
  loginName="#{login}";

To działa dobrze w moim skrypcie. W Express robię to:

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

Myślę, że najnowszy jadeit jest inny?

Merc.

edycja: dodano „.” po skrypcie, aby zapobiec ostrzeżeniu Jade.

!{}służy do interpolacji kodu bez zmiany znaczenia , co jest bardziej odpowiednie dla obiektów

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>

Chodzi o to, aby uniemożliwić atakującemu:

1. Break out of the variable: JSON.stringifywymyka się cudzysłowom
2. Wyrwij się ze znacznika skryptu: jeśli zawartość zmiennej (której możesz nie być w stanie kontrolować, jeśli pochodzi z bazy danych, np.) Zawiera </script>ciąg, zajmie się tym instrukcja replace

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

#{}służy do interpolacji ciągów znaków ucieczki , która jest odpowiednia tylko wtedy, gdy pracujesz z napisami. Nie działa z obiektami

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

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

W moim przypadku próbowałem przekazać obiekt do szablonu drogą ekspresową (podobną do konfiguracji OP). Następnie chciałem przekazać ten obiekt do funkcji, którą wywoływałem za pomocą tagu script w szablonie mopsa. Chociaż odpowiedź lagginreflex zbliżyła mnie do siebie, skończyło się na tym:

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

Dzięki temu obiekt został przekazany zgodnie z oczekiwaniami, zamiast konieczności deserializacji w funkcji. Ponadto inne odpowiedzi wydawały się działać dobrze z prymitywami, ale kiedy tablice itp. Były przekazywane wraz z obiektem, były one analizowane jako wartości łańcuchowe.

Jeśli jesteś podobny do mnie i często używasz tej metody przekazywania zmiennych, oto rozwiązanie kodujące bez zapisu.

W swojej trasie node.js przekaż zmienne w obiekcie o nazwie window, na przykład:

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

Następnie w pliku układu pug / jade (tuż przed block content) otrzymujesz je w ten sposób:

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

Ponieważ mój plik layout.pug jest ładowany wraz z każdym plikiem pug, nie muszę w kółko „importować” moich zmiennych.

W ten sposób wszystkie zmienne / obiekty przekazane do window„magicznie” windowtrafiają do rzeczywistego obiektu przeglądarki, gdzie można ich używać w Reactjs, Angular, ... lub waniliowym javascript.

Oto, jak sobie z tym poradziłem (używając pochodnej MEAN)

Moje zmienne:

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

Najpierw musiałem się upewnić, że niezbędne zmienne konfiguracyjne zostały przekazane. MEAN używa pakietu node nconf i domyślnie jest skonfigurowany tak, aby ograniczać, które zmienne są przekazywane ze środowiska. Musiałem to naprawić:

config / config.js:

oryginalny:

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

po modyfikacjach:

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

Teraz mogę ustawić moje zmienne w ten sposób:

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

Uwaga: zresetowałem "wskaźnik heirarchii" na "__" (podwójne podkreślenie), ponieważ jego domyślnym było ":", co utrudnia ustawianie zmiennych z basha. Zobacz inny post w tym wątku.

Teraz część jadeitowa: Następnie wartości muszą zostać wyrenderowane, aby javascript mógł je pobrać po stronie klienta. Prosty sposób zapisywania tych wartości w pliku indeksu. Ponieważ jest to aplikacja jednostronicowa (kątowa), ta strona jest zawsze ładowana jako pierwsza. Myślę, że powinien to być plik dołączania javascript (tylko po to, aby zachować porządek), ale jest to dobre dla wersji demonstracyjnej.

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

W moim wyrenderowanym html, otrzymuję ładny mały skrypt:

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

Od tego momentu Angular może łatwo wykorzystać kod.

Zobacz to pytanie: JADE + EXPRESS: Iterowanie po obiekcie w wbudowanym kodzie JS (po stronie klienta)?

Mam ten sam problem. Jade nie przekazuje zmiennych lokalnych (ani w ogóle nie tworzy szablonów) do skryptów javascript, po prostu przekazuje cały blok jako dosłowny tekst. Jeśli używasz lokalnych zmiennych „address” i „port” w pliku Jade nad tagiem skryptu, powinny się one pojawić.

Możliwe rozwiązania są wymienione w pytaniu, do którego utworzyłem łącze powyżej, ale możesz: - przekazać każdą linię jako tekst bez znaku zmiany znaczenia (! = Na początku każdej linii) i po prostu wstawić „-” przed każdą linią javascript używającą znaku zmienna lokalna lub: - Przekaż zmienne przez element dom i dostęp przez JQuery (brzydki)

Czy nie ma lepszego sposobu? Wygląda na to, że twórcy Jade nie chcą obsługi wielowierszowego javascript, jak pokazuje ten wątek w GitHub: https://github.com/visionmedia/jade/pull/405