用jade动态生成html答案

【问题标题】：dynamically generating html with jade用jade动态生成html
【发布时间】：2016-06-05 19:44:49
【问题描述】：

我正在尝试获取实时更新翡翠的数据流。有人告诉我应该使用 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

（索引）：4 对象 {你好：对象，照片：“http://media1.com/media/26FPMmPhlkKjHFXW/file.jpg”} （索引）：6http://media1.com/media/26FPMmPhlkKjHFXW/file.jpg

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

【问题讨论】：

标签： node.js express socket.io pug

【解决方案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模板吗？我应该如何在jade中动态迭代数组？
@staminna 如果数据通过socket.io 通道进入，这意味着您需要在浏览器中迭代数据，因此您需要某种客户端解决方案来处理它。如果您不一定需要实时方面，您可以将一个变量传递给保存数组的res.render()，并且您可以使用像each 这样的 Jade 构造来迭代数据。
我真的需要实时方面@robertklep。
也许使用 insertAdjacentHTML() 方法，或者是否有专门的玉器系统来解决这个问题？
403 是“禁止的”，所以服务器由于某种原因不允许您的请求（这个原因我不能说）。