0

我有一个 Node.js 应用程序，它从 Tumblr 加载帖子然后显示它们。
当服务器收到来自客户端的请求时，服务器会从 Tumblr 获取最后 5 个帖子并将它们传递给 Jade，Jade 呈现模板并转换为 HTML，然后将整个内容传递给客户端。

当然，由于从 Tumblr 加载帖子是异步的，所以客户端第一次访问页面时，帖子对象将为空（因为请求在从 Tumblr 接收到帖子之前渲染和发送）。但是，刷新页面后，posts 对象不再为空，页面充满了来自 Tumblr 的帖子。

现在，就像任何体面的网页一样，如果传递的帖子对象为空或为空，我的网页会显示“正在从 Tumblr 加载帖子”。但是，由于 post-fetching 方法的异步特性，它确实需要刷新页面才能看到帖子。我想避免使用 JavaScript 刷新页面，那么如何动态加载页面，在从 Tumblr 检索时显示“正在从 Tumblr 加载帖子”，然后在不刷新的情况下更新页面？

下面是一些相关的代码片段。

后取器方法：

function getPosts() {
    var self = this;
    var posts = {};
    blog.text({limit: 5}, function(error, response) {
        if (error) {
           throw new Error(error);
        }

        self.posts = response.posts;
    });

    if (main.debug) console.log(posts);
    return this.posts;
}

请求处理程序：

app.get('/', function(req, res) {
    res.render('index', {
        title: "My Site",
        posts: getPosts()
    });
});

显示帖子的 Jade 块扩展：

if posts == null
  .postContainer#nullPosts
    h1 Still loading!
    p
      | You caught us at a bad time: we're still loading posts from
      | Tumblr. Try refreshing the page in a few seconds.
    p#emote Sorry! (>u///u<)
else
  for post in posts
    .postContainer
      h1
        a(title='View on Tumblr', target='_blank', href='#{post.post_url}')
          if post.title == ""
            = post.timestamp
          else
            = post.title
      p !{post.body}
      p.tags
        for tag in post.tags
          = "#" + tag + " "
4

1 回答 1

0

Socket.IO 可能会为您解决问题。打开一个套接字连接并通过它们发送图像。套接字在一定时间后轮询服务器。直到您没有来自套接字的任何数据，您可以通过显示消息从客户端处理该数据。

第二种选择是从客户端进行 ajax get 调用，直到它没有完成显示加载图像并成功阻止删除加载图像。

于 2013-05-04T16:55:47.783 回答