從快遞到jade客戶端javascript傳遞數組

Question

我有這個玉模板：

html
  head
    script(type="text/javascript" src="https://www.google.com/jsapi")
    script(type='text/javascript')
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Date', 'Tin_A' ],

       - each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

      ]);
      var options = {
      title: 'bla'
      };
      var chart = new google.visualization.LineChart(document.getElementById('chart_line'));
      chart.draw(data, options);
      }


  body
    h1= title
    #chart_line

我正在使用此調用在express / node.js中呈現jade模板：

app.get('/', function(req, res){
  sensors.findSensorAllData(2, 2, function (error,emps){
        console.log(emps);
        res.render('tmp', {
            title : 'Temperatures in a row',
            myData : emps
        });
    });
});

console.log(emps)的輸出是：

[ { _id: 524b8642028e167fb0e3661d,
    sensor_id: 2,
    value: 49,
    date: Tue Oct 01 2013 20:34:40 GMT-0600 (CST) },
  { _id: 524b863d028e167fb0e3661c,
    sensor_id: 2,
    value: 19,
    date: Tue Oct 01 2013 20:34:35 GMT-0600 (CST) } ]

在渲染出現之后，我希望在jadecrip中有jadecrip中的值......但是它不起作用。 我在純文本中只得到相同的行，就好像行- each datapoing in myData都沒有意義......我做錯了什么？ 謝謝

---編輯：如果我更換線條，一切正常

- each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

同

  ['2004',  20],
  ['2005',  30],
  ['2006',  40]

Answer 1

我認為由於括號周圍的引號，您可能會意外地注入String而不是Array：

- each datapoint in myData
        "[" + datapoint.date + "," + datapoint.value + "],"

我對Jade不太熟悉，但我想你可能想要做以下事情：

- each datapoint in myData
        [#{datapoint.date}, #{datapoint.value}],

此外，在您提供的示例數據中，您只使用Date的year部分，但datapoint.date屬性的內容可能是完整的Date對象，我不確定這是否是您想要的這個用途。

Answer 2

看到這個問題的選擇答案為什么你要做的事情不起作用。 （ JADE + EXPRESS：在內聯JS代碼（客戶端）中迭代對象？ ）

基本上，只要你點擊腳本標簽，你就告訴Jade解析器以原始形式處理事物，而不進行進一步的處理。 您真正想要做的是重做代碼的腳本標記，如下所示：

- if (typeof(pins) != "object")
!= "<script type='text/javascript'>"
!=   "google.load('visualization', '1', {packages:['corechart']});
!=   "google.setOnLoadCallback(drawChart);
!=   "function drawChart() {
!=   "var data = google.visualization.arrayToDataTable([
!=   "['Date', 'Tin_A' ],"
- forEach datapoint in myData
  !=   "[" + datapoint.date + "," + datapoint.value + "],"

!=   "]);"
!=   "var options = {"
!=   "title: 'bla'"
!=   "};"
!=   "var chart = new google.visualization.LineChart(document.getElementById('chart_line'));"
!=   "chart.draw(data, options);"
!=   "}"

試試這個，但我相當肯定它應該有效。

PS：上面的鏈接（我相信）清楚地說明為什么前面的答案應該是不正確的，因為你不能在Jade腳本標簽內部進行那種模板占位符插值。

Answer 3

丑陋警報：

script
  ...
  var data = google.visualization.arrayToDataTable(['Date', 'Tin_A' ].concat(!{JSON.stringify(myData.map(function(i) { return [ i.date, i.value ] })) }));