0

だから私は単純な node.js Web アプリケーションを構築しています。しかし、単一の Web アプリがどのように機能するのかについては、少し行き詰まっています。今のところ、フロント エンドで backboneMVC を使用していません。コンセプトは、ページにフォルダーとリストという 2 つのタブがあるということです。そのため、 host/folder/{folder-id}などの安らかな URL を介して Folder のコンテンツを表示できるようにしたいと考えています。また、Lists についても同じことができます。

Restful リクエストに応じて、パラメーターを指定して View テンプレートを res.render するだけで問題ないようです。

しかし、これら 2 つが同じページにあり、ホームページを離れずにタブをクリックしてアクセスできる必要がある場合、私は混乱します。# タグ付きのフロントエンド ルーティングを使用することで、機能させることができるかもしれません (つまり、 host/index.html#/folder/{id}になります)

index.html を離れることなく、jade テンプレートのパーシャルを介してホームページの一部を切り替えられる、パーシャル テンプレートを使用した簡単な方法はありますか?

4

3 に答える 3

2

単一ページ アプリでテンプレートを読み込むために Page.js を確認することをお勧めします ( http://github.com/visionmedia/page.js )。これも、Jade を作成したのと同じ Visionmedia によるものです。

小規模なアプリ/サイトのバックボーンよりも理解しやすいと思いました。

于 2013-03-28T03:40:46.580 に答える
0

asset-rackを見るかもしれません。静的コンテンツをブラウザーにプッシュするのに役立ちます。

jade テンプレートを javascript 関数にプリコンパイルして、クライアントでレンダリングできます。構文は非常に単純です。

new JadeAsset({
  url: '/templates.js',
  dirname: './templates'
});

したがって、テンプレート ディレクトリが次のようになっているとします。

index.jade
contact.jade
user/
    profile.jade
    info.jade

次に、クライアントでテンプレートを次のように参照します。

$('body').append(Templates['index']());
$('body').append(Templates['user/profile']({username: 'brad', status: 'fun'}));
$('body').append(Templates['user/info']());

ここにリンクがあります：

http://asset-rack.org

于 2013-03-28T14:31:36.693 に答える
0

以前にパーシャルを直接レンダリングしようとしたことはありませんが、あなたの質問を理解したら、このようなことができますか?

部分的な出力を生成するビューを作成します。ルートを使用して、それらを取得するためのエンドポイントを提供します。あなたのサイトからいくつかのJavaScriptをトリガーして、ブロックをそのエンドポイントからの出力に置き換えます。

次のようになります: routes.js:

app.get('/folder/:id', folders.show)

controllers/folders.js で:

exports.create = function (req,res){
  res.render('folders/partial')
}

フォルダ/show.jade:

button#tab1
.tab
  .result

次に、サイトの内容をパーシャル形式のコンテンツに置き換える単純な jquery をいくつか使用します。

$('#tab1').click(function() {
  $.get('/folder/:id', function(data) {
    $('.result').html(data);
  })
})
于 2013-03-28T04:48:21.740 に答える