제이드 템플릿 파일에서 스크립트 파일로 변수를 전달하는 방법은 무엇입니까?

제이드 템플릿 파일에서 스크립트 파일로 변수를 전달하는 방법은 무엇입니까?

jade 템플릿 파일(index.jade)에 선언된 변수(config)가 Javascript 파일로 전달되지 않아 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')

다음은 제 앱의 일부입니다.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));

그리고 다음은 제 자바스크립트 파일의 일부입니다(public/javascripts/app.js).

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

localhost(나만의 컴퓨터)에서 개발 모드(NODE_ENV=개발)로 사이트를 실행하고 있습니다.디버깅을 위해 노드 검사기를 사용하고 있는데, 이 검사기는 구성 변수가 public/javascripts/app.js에 정의되어 있지 않다고 알려주었습니다.

아이디어 있어요?감사합니다!!

조금 늦었지만...

script.
  loginName="#{login}";

이것은 내 대본에서 잘 작동합니다.Express에서는 다음 작업을 수행합니다.

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

최근에 나온 옥은 다른 것 같아요?

메르.

편집: 제이드 경고를 방지하기 위해 스크립트 뒤에 "."를 추가했습니다.

#{} 는 입력을 자동으로 이스케이프하는 이스케이프 문자열 보간용이므로 JS 개체보다는 일반 문자열에 적합합니다.

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

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

!{} 이스케이프되지 않은 코드 보간을 위한 것으로, 객체에 더 적합합니다.

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

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

주의: 이스케이프되지 않은 코드는 위험할 수 있습니다.XSS(사이트 간 스크립팅)를 방지하려면 사용자 입력을 모두 검사해야 합니다.

예:

{ foo: 'bar </script><script> alert("xss") //' }

다음이 될 예정:

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

가능한 해결책: 사용.replace(/<\//g, '<\\/')

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

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

이 방법은 공격자가 다음을 수행하는 것을 방지하는 것입니다.

1. 변수이탈:JSON.stringify.
2. tag:할 수 에 " " " " " " " " 이 있으면 " ": " " " " " 이 .</script>string,됩니다.

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

저의 경우, 저는 빠른 경로(OPs 설정과 유사)를 통해 객체를 템플릿으로 전달하려고 했습니다.그런 다음 저는 그 객체를 퍼그 템플릿의 스크립트 태그를 통해 호출하는 함수로 전달하고 싶었습니다.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
        }
    });
});

그런 다음 퍼그/옥수수 레이아웃 파일(직전)에서block content), 당신은 다음과 같이 그들은 다음과 같습니다.

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

저의 레이아웃으로.pug 파일은 각 pug 파일과 함께 로드되므로 변수를 계속해서 '가져올' 필요가 없습니다.

이 방식으로 모든 변수/개체가 전달됩니다.window'마법적으로' 결국 진짜가 됩니다.windowReactjs, Angular, ... 또는 바닐라 자바스크립트에서 사용할 수 있는 브라우저의 개체입니다.

다음 질문을 참조하십시오: JADE + EXPRESS: 인라인 JS 코드(클라이언트 측)에서 객체를 반복합니까?

저도 같은 문제를 겪고 있습니다.Jade는 자바스크립트 스크립트에 로컬 변수를 전달하지 않고(또는 템플릿을 전혀 수행하지 않음), 단순히 전체 블록을 리터럴 텍스트로 전달합니다.스크립트 태그 위에 있는 제이드 파일에서 로컬 변수 'address'와 'port'를 사용하면 표시됩니다.

가능한 해결책은 위에 링크한 질문에 나열되어 있지만 - 모든 줄을 이스케이프되지 않은 텍스트로 전달(!=)하거나 로컬 변수를 사용하는 자바스크립트의 모든 줄 앞에 간단히 "-"를 붙이거나: - 변수를 돔 요소를 통해 전달하고 JQuery(jQuery)를 통해 액세스할 수 있습니다.

이보다 더 좋은 방법은 없습니까?제이드의 제작자들은 GitHub: https://github.com/visionmedia/jade/pull/405 의 이 스레드에서 보여주듯이 멀티라인 자바스크립트 지원을 원하지 않는 것 같습니다.

이 문제를 해결한 방법은 다음과 같습니다(평균 파생 모델 사용).

내 변수:

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

먼저 필요한 구성 변수가 전달되고 있는지 확인해야 했습니다.평균은 노드 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 include 파일(깨끗한 상태를 유지하기 위해)이어야 한다고 생각하지만, 이것은 데모를 하기에 좋습니다.

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/message/index.dll:

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>        

이때부터 각진이 코드를 쉽게 활용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/8698534/how-to-pass-variable-from-jade-template-file-to-a-script-file