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

解决此问题的另一种更通用的方法是在 Javascript 中创建一个变量，然后将 HTML 属性设置为该 Javascript 变量。

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