用 jade 动态生成 html

Question

我正在尝试获取实时更新 jade 的数据流。有人告诉我应该使用 socket.io 并且我设法连接了它，但我无法在模板中访问它的值。

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) {
          console.log("jade connected to socket.io")
          console.log(data);
          var photo = data.hello.data[0].images.original.url; 
          console.log(photo);
      });
  body
  block content
    img(src=photo) // results in empty img tag
    img(src={photo}) // results in <img src="[object Object]">
    img(src=#{photo}) // results in undefined

控制台输出：翡翠连接到 socket.io

(index):4 对象 {你好：对象，照片：“http://media1.com/media/26FPMmPhlkKjHFXW/file.jpg”} (指数):6 http://media1.com/media/26FPMmPhlkKjHFXW/file.jpg

我会很高兴看到jade 拾取图像，意味着我终于可以从后端获取数据了。我仍然需要遍历数据对象中的数组

Answer 1

在您的设置中，Jade 模板仅呈现一次（服务器端，当处理请求时）。

要执行动态更新，您至少需要两件事：

与服务器的某种通信渠道；您为此使用 socket.io，这是一个不错的选择；
将操纵 DOM 以更改页面外观的代码；你还没有这样做。

根据你的代码，你可以试试这个：

script.
  var socket = io.connect('http://localhost:8898/');
  socket.on('news', function (data) {
    var photo = data.hello.data[0].images.original.url;
    document.getElementById('photo').src = photo;
  });
body
  block content
    img#photo(src='placeholder.jpg')

用 jade 动态生成 html

dynamically generating html with jade

node.js

express

socket.io

pug