将值从express传递到jade中的javascript答案

【问题标题】：passing a value from express to a javascript in jade将值从express传递到jade中的javascript
【发布时间】：2013-09-30 15:12:10
【问题描述】：

我正在尝试将值传递给 javascript 中的变量，从 express 到玉模板。

这是我的快递路线：

app.get('/tmp', function(req, res){
      res.render('tmp', {
            title: 'Temperature',
            CPU_value : 20,
        });
});

那么，这是我的玉模板：

html
  head
    h1= title
    p= CPU_value
    script(type='text/javascript', src='https://www.google.com/jsapi')
    script(type='text/javascript')
      - var myCPU_value = CPU_value
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Memory', 20],
      ['CPU', 20],
      ['Network', 68]
      ]);
      var options = {
      width: 400, height: 120,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      minorTicks: 5
      };
      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      chart.draw(data, options);
      }
  body
    #chart_div

CPU_value 的变量传递给p 工作正常，与标题相同。有用。但是我一直无法使用传递给函数google.visualization.arrayToDataTable的数组中CPU_value的值。

我试过了：

...
['CPU', CPU_value],
...

或

....
var myCPU_value = CPU_value;
....
['CPU', myCPU_value],
....

他们都没有工作......

我怎样才能正确地做到这一点？

谢谢

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

试试这个：

var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Memory', 20],
      ['CPU', !{JSON.stringify(CPU_value)}],
      ['Network', 68]
      ]);

【讨论】：

谢谢，这对我有帮助。但是你能解释一下为什么会这样以及它究竟做了什么吗？

【解决方案2】：

我不喜欢模板化我的客户端 javascript 的想法，我在尝试它时遇到了问题。所以我的首选解决方案是使用data-* 属性将数据存储在dom 中，并从JS 访问它。

//jade
html
  head
    h1= title
    p#cpuValue(data-cpuvalue=locals.CPU_value)= locals.CPU_value

// client js
var myCPU_value = 
document.getElementById('cpuValue')
.getAttribute('data-cpuvalue');
...
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 20],
['CPU', myCPU_value], // or +myCPU_value to coerce String>Number
['Network', 68]
]);
...
chart.draw(data, options);

【讨论】：