2012-05-04 5 views
0

Использование NodeJs Я пытаюсь сделать что-то очень похожее на Meteor: я хочу отправить только те части страницы, которые на самом деле были изменены. Моя дилемма заключается в том, что я знаю, как создать такую ​​структуру, чтобы реагировать на ссылки на клики и отправлять частичные обновления, но такая структура не предназначена для прямого просмотра страницы, отличной от индекса (это то, что требуется для поисковых систем и людей без javascript для использования вашего сайта).Частичное обновление при поддержке seo

Я также могу понять, как сделать фреймворк для поддержки всех перезагрузок страниц, рулей и простого экземпляра узла узла, позаботится об этом. 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); 
     } 
    } 
} 

ответ

1

Вот образец, который я часто использую (в приложениях 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); 
    }); 
}); 

image.jade:

img(src=uri, alt=title) 

images.jade:

#gallery 
    for image in images 
    include image 

Клиенты, которые просят JSON получить, что, в противном случае они получают полную страницу, только если это запрос, не XHR. Запросы XHR получают только фрагмент HTML для запрошенного ресурса. Это хорошо работает для довольно простых приложений, где ресурсы в основном соответствуют страницам.

+0

Однако это означает, что мне нужен файл ресурсов/шаблонов для каждой возможной страницы, верно? Насколько я понимаю, мне все еще нужен отдельный метод как для полной страницы, так и для частичного обновления? –

+0

Как я писал, это работает отлично для довольно простых приложений, где страница в целом соответствует ресурсу. Я добавил пример использования, который охватывает это, и список ресурсов, в которых шаблон листинга включает только шаблон ресурса. –

+0

+1 для этого, хотя моя проблема кроется в том, что касается остальной части страницы. Я имею в виду, что у вас будет галерея и одно изображение, встроенное в заголовок, нижний колонтитул и т. Д. Для запроса json, это не потребует обновления, но для полного запроса страницы эти элементы все равно нуждаются в рендеринге.Выше кода на самом деле недостаточно для этого, не так ли? –

Смежные вопросы