部分更新，同时支持seo

Question

使用NodeJs我正在尝试做一些非常类似于Meteor的操作：我只想发送实际发生更改的页面部分。我的困境是，我知道如何创建这样一个框架来响应链接点击并发送部分更新，但是这样的框架不适合直接浏览除索引之外的页面（这是搜索引擎和人们所需的没有JavaScript来使用你的网站）。

我也可以弄清楚如何让一个框架支持整个页面重新加载，handlebars和一个简单的节点服务器实例会照顾到这一点。 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上撰写这篇文章的任何错误，我感到抱歉。如果您对我的问题有任何疑问，只需询问，我会根据需要进行更新。

更新： 解决方案的一个可能的示例可能是以下代码。这是给一个想法，它可能不会实际运行

// 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); 
     } 
    } 
} 

Answer 1

这个模式我经常使用（在快速应用程序）：

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); 
    }); 
}); 

image.jade：

img(src=uri, alt=title) 

images.jade：

#gallery 
    for image in images 
    include image 

请求获取JSON的客户端会获得该信息，否则只有在非XHR请求时才会获得整个页面。 XHR请求仅获取请求资源的HTML代码片段。这适用于非常简单的应用程序，其中资源主要对应于页面。