Pugで渡される変数の作成JavaScriptへの利用

Question

私は、ユーザへのリンクを与えるPugビューを持っています。ページに入る前に、ユーザーはすでに認証されており、セッション変数にユーザー名と部門があります。私はこのようなビューに変数として渡すことができます。

res.render('landingpage', { title: 'Landing Page', 
          username: req.session.username, 
          department: req.session.department }); 

そして、私はこの行を持つビューで、それが動作します：上部にある「会計からようこそボブ」をプリントし

p(class='navbar-text') Welcome #{username} from #{department} 

問題はありません。

しかし、私がする必要があるのは、渡された部門に基づいてリンクのいくつかが表示されているかどうかを制御することです。 （部門がユーザーをランディングページに渡してセッションに参加させた認証機能で発見されました）

これをドキュメントレディ機能に配置しようとしましたが、これは未定義のため機能しません。私がする必要があるのは、部門に基づくリンクの可視性属性とonclickイベントを変更できることです。リンクにアクセスできる部門を教えてくれるJSON構成ファイルがありますが、その部門変数を可視性を変更するために呼び出すことができるjavascript関数に変換する方法がわかりません。

私はそれをdepartmentと＃{department}のドキュメント準備関数に追加しようとしましたが、それが何であるか知らないか、リテラル文字列のように使用するだけです。進める方法のアイデア？

Answer 1

非表示入力を使用して部門情報を渡し、入力値をjsで取得できます。

例：

doctype html 
html 
    head 
     title=title 
     script(src='/node_modules/jquery/dist/jquery.min.js') 
    body 
     input#department(type='hidden',value=department) 
     p(class='navbar-text') Welcome #{username} from #{department} 
     img(id='accessApproved' src='/images/DarkBlueIcon.png' class='overlay' style='visibility: hidden;') 
    script. 
     $(document).ready(function() { 
      var department = $('#department').val(); 
      if(department === 'Accounting') { 
       document.getElementById('accessApproved').style.visibility = 'visible'; 
      } 
     }); 

Answer 2

わかりましたので、私は、誰もが私が求めていたかを確認するための十分な情報を投稿しませんでした。ごめんなさい。新しい投稿を作成し、それをすべて私が必要とした部分だけにカットする過程で、私はそれを動作させました。 app.jsで

が

'use strict'; 

var express = require('express'); 
var app = express(); 

app.set('views', './views'); 
app.set('view engine', 'pug'); 

var session = require('express-session'); 
var FileStore = require('session-file-store')(session); 

var fileStoreOptions = { 
         path: './sessions', 
         ttl: 86400 
        }; 
var sessionOptions = { 
         secret: 'SecretKey', 
         resave: false, 
         saveUninitialized: false, 
         name: 'sessionId', 
         store: new FileStore(fileStoreOptions) 
        }; 
app.use(session(sessionOptions)); 

app.get('/landingpage', function(req,res,next) { 
    req.session.accessToken = true; 
    req.session.username = 'Bob'; 
    req.session.department = 'Accounting'; 
    res.render('landingpage', { title: 'Landing Page', 
           username: req.session.username, 
           department: req.session.department }); 
}); 

app.get('/images/DarkBlueIcon.png', function(req,res) { 
      res.sendFile(__dirname + '/images/DarkBlueIcon.png'); 
}); 


app.get('/node_modules/jquery/dist/jquery.min.js', function(req,res) { 
     res.sendFile(__dirname + '/node_modules/jquery/dist/jquery.min.js'); 
}); 

var server = app.listen(3000, function() { }); 

を提出し、これはパグファイルである：このコードは動作します screenshot of Hello to Bob and Blue Icon

Answer 3

から明確にする：

doctype html 
html 
    head 
     title=title 
     script(src='/node_modules/jquery/dist/jquery.min.js') 
    body 
     p(class='navbar-text') Welcome #{username} from #{department} 
     img(id='accessApproved' src='/images/DarkBlueIcon.png' class='overlay' style='visibility: hidden;') 
    script. 
     $(document).ready(function() { 
      if('#{department}' === 'Accounting') { 
       document.getElementById('accessApproved').style.visibility = 'visible'; 
      } 
     }); 

このあなたに与えます他の解決策：補間された文字列は引用符で囲む必要があります。 ＃{}の前後に引用符を使用しないと、javascriptは変数としてそれを読み込もうとします。

ソリューション：

'#{department}' === 'Accounting' 

説明：

ソリューションはtrueある'Accounting' === 'Accounting'、と評価されます。間違った方法は、引用符を忘れて、Accounting === 'Accounting'と評価する#{department} === 'Accounting'を試してください。これはUndefined === 'Accounting'と同じです。これはfalseです。