0

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

我还可以弄清楚如何制作一个框架来支持整个页面重新加载、把手和一个简单的节点服务器实例来解决这个问题。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);
        }
    }
}
4

1 回答 1

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

图像.玉：

img(src=uri, alt=title)

图像.玉：

#gallery
  for image in images
    include image

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

于 2012-05-04T10:46:37.087 回答