我正在尝试使用 NodeJs 做一些与 Meteor 非常相似的事情:我只想发送页面中实际发生变化的部分。我的困境是我知道如何创建这样一个框架来响应链接点击并发送部分更新，但这样的框架不适合直接浏览到索引以外的页面(这是搜索引擎和人们所需要的无需 javascript 即可使用您的网站)。

我还可以弄清楚如何制作一个框架来支持整个页面重新加载、 Handlebars 和一个简单的 Node 服务器实例来处理这个问题。 Hoeever，我想不出如何创建一种方法来允许我编写一个方法来告诉框架页面的部分更新，并让框架找出还需要加载的内容。

我能想到的一种方法是每次(针对整个页面加载)创建索引页面并对其应用部分更新，但如果子页面与非常拥挤的索引有很大不同，这很快就会变得昂贵。

示例方法如下所示:

function images(id) {
    if (id == null) {
        // load all images from database
        template.images = db.result();
        template.content = template.loadblock('gallery');
    }
    else {
        // retrieve single image
        template.content = template.loadblock('single_image');
        template.image = db.result();
    }
}

在 partisl updste 上，为 domain.com/images 调用此方法会工作得很好，因为很明显发生了什么变化。 对于整个页面加载，此函数会遗漏页眉、页脚、导航等内容。

在答案中，我会寻找一个已经完成此操作的示例或一些可以为我指明正确方向的提示。对于我在 ipad 上写这篇文章的任何打字错误，我深表歉意。如果您对我的问题有任何疑问，请提问，我会根据需要进行更新。

更新: 一个可能的解决方案示例可能是以下代码。给个idea吧，估计实际跑不了

// As a convention, don't pass around raw values if they aren't static but pass around functions such as
data.images = function () {
    // run db query
    // return an object with the images
}
// This constraint might be limited to the index() method

var routes = {
// This now allows us to do things like this:
index: function() { 
    var data;
    // Initialise everything needed for the index
    data.title = 'Index';
    data.nav = { Index: '/', Images: '/images' };
    data.content = 'Hello World';
},

categories: function() {
    var data;
    data.content = render('gallery', function () { /* load and return images as object */ }); // Not sure about this dynamic subtemplating but oh well
}

// This now allows us to do the following:
function request(page, type) {
    if (type == 'update') {
        if (routes[page] != undefined && typeof routes[page] == 'function') {
            respond(routes[page]());
        }
    }
    else {
        if (routes[page] != undefined && typeof routes[page] == 'function') {
            var data = mergeArrays(routes['index'](), routes[page]());
            // index.html which is just a Handlebars template
            respond(data);
        }
    }
}

最佳答案

这是我经常使用的模式(在 Express 应用程序中):

function respond(req, res, name, resource) {
    if(req.accepts('json')) {
        // Send JSON to clients who want it
        res.send(resource);
    } else {
        // Render with layout only for non-XHR requests
        resource.layout = !req.xhr;
        res.render('resources/' + name, resource);
    }
}

示例用法:

app.get('/images', function(req, res, next) {
  getImages(function(err, images) {
    if(err) return next(err);

    respond(req, res, 'images', images);
  });
});

app.get('/images/:id', function(req, res, next) {
  getImage(req.params.id, function(err, image) {
    if(err) return next(err);

    respond(req, res, 'image', image);
  });
});

图像. Jade :

img(src=uri, alt=title)

images.jade:

#gallery
  for image in images
    include image

要求 JSON 的客户会得到它，否则只有在非 XHR 请求时他们才会得到完整的页面。 XHR 请求只获取所请求资源的 HTML 片段。这适用于非常简单的应用程序，其中资源主要对应于页面。

关于javascript - 部分更新同时支持seo，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10446298/