0

NodeJs を使用して、Meteor と非常に似たようなことをしようとしています。実際に変更されたページの部分だけを送信したいと考えています。私のジレンマは、リンクのクリックに応答して部分的な更新を送信するようなフレームワークを作成する方法を知っているが、そのようなフレームワークは、インデックス以外のページへの直接のブラウジングには対応できないということです (これは、検索エンジンと人々に必要なものです)。あなたのサイトを使用するためのJavaScriptなし）。

また、ページ全体のリロード、ハンドルバー、および単純なノード サーバー インスタンスをサポートするフレームワークを作成する方法も理解できます。ただし、ページの部分的な更新をフレームワークに伝え、他に何をロードする必要があるかをフレームワークに判断させるメソッドを 1 つ記述できるようにする方法を作成する方法がわかりません。

私が考えることができる方法は、(ページ全体の読み込みに対して) 毎回インデックス ページを作成し、それに部分的な更新を適用することですが、サブページが非常に混雑したインデックスと大きく異なる場合、すぐに高価になる可能性があります。

メソッドの例は次のようになります。

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

部分的な更新では、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)

images.jade:

#gallery
  for image in images
    include image

JSON を要求するクライアントはそれを取得します。それ以外の場合は、非 XHR 要求の場合にのみフル ページを取得します。XHR リクエストは、リクエストされたリソースの HTML スニペットのみを取得します。これは、リソースの大部分がページに対応する非常に単純なアプリに適しています。

于 2012-05-04T10:46:37.087 に答える