1

翡翠を使用してページをレンダリングしたい。私のルートファイルには次のものがあります：

exports.start = function(req, res){
    res.render('start', {
        title: 'Special you!',
        locals: {
            percent: 0
        }
    });
};

start.jade ファイルでは、次のようにパーセント変数を使用したいと考えています。

.progress.progress-success  
    .bar(style='width: #{locals.percent}')

デバッグ目的で、このコードも start.jade に含めました。

each item in locals
    p= item

出力は次のとおりです。

[object Object]

Special you!

function locals(obj){ for (var key in obj) locals[key] = obj[key]; return obj; }

false

C:\Users\Alexandru\Documents\GitHub\yolo-adventure\views\start.jade

locals.percent の値は未定義です。

完全な start.jade ファイルは次のとおりです。

extends layout

block custom-style
    link(rel='stylesheet', href='/stylesheets/main-style.css')

block content
    h1  Start from here
    each item in locals
        p= item

    .progress.progress-success  
        .bar(style='width: #{locals.percent}')

ページのソースは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>Special you!</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.css">
        <link rel="shortcut icon" href="/images/favicon.png">
        <link rel="stylesheet" href="/stylesheets/main-style.css">
    </head>
    <body>
        <h1>Start from here</h1>
        <p>[object Object]</p>
        <p>Special you!</p>
        <p>function locals(obj){
              for (var key in obj) locals[key] = obj[key];
                  return obj;
           }
        </p>
        <p>false</p>
        <p>C:\Users\Alexandru\Documents\GitHub\yolo-adventure\views\start.jade</p>
        <div class="progress progress-success">
            <div style="width: undefined" class="bar"></div>
        </div>
    </body>
</html>

なぜこうなった？

4

1 に答える 1

2

サーバ側

ローカルを直接定義するだけです：

res.render('start', {
    title: 'Special you!',
    percent: 0
});

クライアント側

次に、これを行うことができます：

.progress.progress-success
  .bar(style='width: ' + percent + ';')

この問題に対処するもう 1 つの一般的な方法は、Javascript で変数を作成し、HTML 属性をその Javascript 変数に設定することです。

.progress.progress-success
  - var bar_style = 'width: ' + percent + ';';
  .bar(style=bar_style)
于 2012-12-15T09:04:13.433 に答える