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

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

（index）：4 Object {hello：Object，photo：“http://media1.com/media/26FPMmPhlkKjHFXW/file.jpg”} （索引）：6 http://media1.com/media/26FPMmPhlkKjHFXW/file.jpg

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

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

1 个答案: