2016-04-03 7 views
0

現在、以下の技術を学んでいます。ExpressJSビルドでAssemble.ioフロントエンドを構築する

私は、NodeJS + ExpressJS + MongoDB + Monk + Jadeビルドからなる基本的なアプリケーションを構築しました。ジェイドを、異なるテンプレートエンジンであるハンドルバーで置き換えるつもりです。これを助けるために、私はAssemble.ioを実装することを考えていました。これは、Handlebarsを使用する静的サイトジェネレータであり、Bootstrapフロントエンドフレームワークを使用してビルドを開始するための素敵な基礎を設定しています。私はまた、Assembleがファイルをレイアウト、テンプレート、パーシャルに素早く分離するのが好きです。

このアプリケーション/ウェブサイトの目標は、MongoDBからデータを取り出してフロントエンドに表示することです。フロントエンドは100種類の異なるコンテンツページで構成されるため、維持管理が簡単になる必要があります。もちろん、フロントエンドコードとバックエンドコードとの明確な区別が必要です。

このような設定を行う最も論理的な方法は何でしょうか。 ExpressJSでアセンブルすることは可能ですか?もしそうなら、私はapp.jsに私の意見を設定して、アセンブルファイルを表示するのですか?または、view engineをハンドルバーに設定し、CDNリンクをブートストラップにプルする方が良いでしょうか? (しかし、私がそれをした場合、どのようにレイアウト、テンプレート、パーシャルをセットアップするのですか?)

答えて

1

いくつかのアプローチがあります。

  1. 構築時にアセンブルするページ構造を事前レンダリングします。その後、フロントエンドのjavascriptを使用してデータを読み込んで動的コンテンツをレンダリングします。
  2. サーバ側のコントローラでassemble apiを使用して、テンプレートとデータをロードし、実行時にコンテンツをレンダリングします。
  3. (2)と同様に、組み込みのViewクラスを特急でオーバーライドし、そこにアセンブルして読み込みとレンダリングを行います。

あなたapp.js中...ロードテンプレート、データ、ヘルパー、ミドルウェアなどに直接組み立てAPIを使用することができますので、私は今#2となるだろう。その後

var express = require('express'); 
var Assemble = require('assemble'); 

var app = express(); 
var assemble = new Assemble(); 

// setup middleware 
assemble.onLoad(/\.hbs/, function(file, next) { 
    // so something if needed 
    next(); 
}); 

// load helpers 
assemble.helpers(['path/to/helpers/*.js']); 
// load async helpers 
assemble.asyncHelpers(['path/to/async-helpers/*.js']); 

// load templates 
assemble.layouts(['path/to/layouts/*.hbs']); 
assemble.partials(['path/to/partials/*.hbs']); 
assemble.pages(['path/to/pages/*.hbs']); 

// load global site data 
assemble.data(['path/to/site.json']); 

// render function to make looking up and rendering pages easier 
function render(name, locals, cb) { 
    var view = assemble.getView(name); 
    if (!view) return cb(new Error('Unable to find "' + name + '"')); 
    view.render(locals, function(err, result) { 
    if (err) return cb(err); 
    cb(null, result.content); 
    }); 
} 

// setup some express routes 
app.get('/', function(req, res, next) { 
    render('index', {title: 'Home Page'}, function(err, content) { 
    if (err) return next(err); 
    res.status(200); // I don't remember this api off the top of my head 
    res.send(content); 
    }); 
}); 

は、この情報がお役に立てば幸いです...あなたがページを取ると、それをレンダリングするために、あなたのルートで使用できるrender関数を作成します。

+0

詳細な回答をいただきありがとうございます。それは間違いなくこれを論理的に助けました。 –

関連する問題