Question

使用NodeJ我正在尝试做一些与Meteor非常相似的事情：我只想发送实际改变的页面部分。我的困境是我知道如何创建这样一个框架来响应链接点击并发送部分更新，但这样的框架不能满足直接浏览到索引以外的页面（这是搜索引擎和人们所需要的）没有javascript来使用您的网站。）

我还可以弄清楚如何制作一个框架来支持整个页面重新加载，把手和一个简单的节点服务器实例会处理这个问题。但是，我无法弄清楚如何创建一种方法，允许我编写一个方法来告诉框架页面的部分更新，并让框架找出需要加载的其他内容。

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

示例方法看起来像这样：

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

这是我经常使用的模式（在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片段。这适用于非常简单的应用程序，其中资源主要与页面相对应。

支持seo时的部分更新

1 个答案: