将值从 javascript 传递到玉答案

【问题标题】：Pass values from javascript to jade将值从 javascript 传递到玉
【发布时间】：2016-06-04 06:00:36
【问题描述】：

我正在使用 node.js、express、jade 和 socket.io，我可以让 JavaScript 代码在 Jade 端运行，但我无法从脚本生成 html。阻止

我必须根据您的输入更新我的问题。以下是文件：

server.js

 app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
      socket.emit('news', { hello: res}); // res is the reponse object
      socket.on('my other event', function (res) {
      console.log("socket.io connected and data sent to jade");
      });
    });

layout.jade：

doctype html
html
  head
    title= title

    script(src='components/jquery/dist/jquery.min.js')

script(type='text/javascript' src='https://cdn.socket.io/socket.io-1.0.6.js')
script(type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/jade.min.js')
script(type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/runtime.min.js')

  script.
  var socket = io.connect('http://localhost:8898/');
  socket.on('news', function (data) {
    var photo = data.hello.data[0].images.original.url;      
  });


body
    block content
      img(src="#{photo}")  // <--- issue here, creates "undefined" image

index.jade:

extends layout.jade 

  img(src="#{photo}")  // my problem is here, creating <undefined> tags in html

【问题讨论】：

标签： javascript node.js express socket.io pug

【解决方案1】：

您可以删除现有的组件内容，然后在 jQuery AJAX 回调中使用 jQuery 重新渲染。有点像..

玉：

标签#数据

之后：

脚本。

var socket = io.connect('http://localhost:8898/');
  socket.on('news', function (data) {
      $('#data').text('');    
      $('#data').text(data);
});

【讨论】：

也许，但是我从express生成的jade模板完全消失了。

【解决方案2】：

可能有点太明显了，但从那个例子来看，但我认为 script 标签内的 JS 块需要缩进。虽然无法测试

script.

    var socket = io.connect('http://localhost:8898/');
        socket.on('news', function (data) {
        console.log("socket.io.on data reaching jade");
        console.log(data); // prints fine, but to console only.
        socket.emit('my other event', { my: data }); 
    });

【讨论】：

好像没什么区别。

【解决方案3】：

由于您是从 layout.jade 扩展而来的，因此 index.jade 是您的子模板。您不需要声明 html 是您的块内容吗？像这样：

extends layout

block content
  #{data}  // my problem is here, creating <undefined> tags in html
      p #{data.stuff}
        img(src="images/bird.jpg")  // works

【讨论】：

我根据您的输入更新了我的问题。请查看layout.jade最后一行的注释错误是“Cannot read property 'hello' of undefined”