部分更新，同時支持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代碼片段。這適用於非常簡單的應用程序，其中資源主要對應於頁面。