2012-07-26 3 views
17

PeepcodeのNode.js Full Stackビデオで作業しようとしています。彼らはexpress/jadeの古いバージョンを使用しているようです。 block/extendsを使ってレイアウトをレンダリングすることについての言及はありません。翡翠 - 別のディレクトリからテンプレートをロードする

アプリで使用される設定は、すべてのサブアプリケーション用に読み込まれる/views/layout.jadeファイルを持つことです。サブアプリケーションのビューは/ apps //ビューにあります。

私のserver.jsはかなり標準的です。 Expressは、私がレンダリングにいきビュー

routes.coffee

routes = (app) -> 

    app.get "/login", (req,res) -> 
    res.render "#{__dirname}/views/login", 
     title: "Login" 
     stylesheet: 'login' 

module.exports = routes 

認証/ルート/サブアプリケーションのための私のルートファイルがに/アプリのあるバージョン3.0.0rc1

require('coffee-script'); 

var express = require('express') 
    , http = require('http') 
    , path = require('path'); 

var app = express(); 

app.configure(function(){ 
    app.set('port', process.env.PORT || 3000); 
    app.set('views', __dirname + '/views'); 
    app.set('view engine', 'jade'); 
    app.use(express.favicon()); 
    app.use(express.logger('dev')); 
    app.use(express.bodyParser()); 
    app.use(express.methodOverride()); 
    app.use(app.router); 
    app.use(express.static(path.join(__dirname, 'public'))); 
}); 

app.configure('development', function(){ 
    app.use(express.errorHandler()); 
}); 

require('./apps/authentication/routes')(app) 

http.createServer(app).listen(app.get('port'), function(){ 
    console.log("Express server listening on port " + app.get('port')); 
}); 

ですこの。

login.jade

extends layout 

block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password) 
    input(type='submit', name='Submit') 

、最終的にレイアウト。

doctype 5 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/#{stylesheet}.css') 
    body 
    block content 

はlocalhostに行く:

エクスプレス 500エラー:3000 /ログインはこのレンダリング/Users/StevenNunez/code/HotPie/apps/authentication/views/login.jade:1> 1 |レイアウト2 | 3 | | ENOENT、そのようなファイルやディレクトリはありません '/Users/StevenNunez/code/HotPie/apps/authentication/views/layout.jade'

私のフォルダ構造:フォーム(アクション= '/セッション'、メソッド= '投稿'

. 
├── ' 
├── apps 
│   └── authentication 
│    ├── routes.coffee 
│    └── views 
│     └── login.jade 
├── package.json 
├── public 
├── server.js 
└── views 
    ├── index.jade 
    └── layout.jade 

ありがとうございます。

答えて

15

:あなたが他のレイアウトを呼び出したい場合は、このようなディレクトリを使用することができます。

extends ../../../views/layout 

block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password') 
    input(type='submit', name='Submit') 

私はあなたが他のディレクトリからの眺めを接続するための変数__dirnameを使用することができますapp.set('view options',{layout:false});

+0

ok ...それはうまくいきます...しかし、拡張メソッドで動作する正しい方法であるため、アプリケーションを設定しました – andrescabana86

+6

私は同じチュートリアルを通して働いています同じ問題。何らかの理由で、私は 'extends ../../../views/layout'を使用するのが快適ではありません。これに代わる方法はありますか? – Feech

+0

驚くばかりです。正確に私が必要なもの! – Hcabnettek

2

レンダリングの2つの方法を使用しようとしています... レイアウトを拡張する最初のレイアウトと2番目はブロックコンテンツです。 レイアウトを使用すると、login.jadeのフォルダ内のレイアウトファイルが自動的に拡張されます。

extendsを使用する必要はなく、block文を使用することはできませんが、extendsを使用する場合は、レイアウトを無効にする必要があります。

app.set('view options',{layout:false}); 

app.set('view engine', 'jade'); 

後、レイアウトが伸びるようにファイルを拡張します:

アプリにこれを追加

layout.jade

doctype 5 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/#{stylesheet}.css') 
    body 
    block content 

extends layout 

block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password) 
    input(type='submit', name='Submit') 

login.jadeはログインファイルは同じディレクトリにある必要があります。

appDirectory 
    views 
    layout 
    otherViews 
    login 

login.jade私はちょうどextends呼び出しで相対パスを与えなければならなかったように見えます

extends ../views/layout  
block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password) 
    input(type='submit', name='Submit') 
+0

感謝。 「正しい」方法またはレンダリングとは何ですか?私はnode/express/jadeに入っているので、コミュニティが設定した慣習に従いたいと思っています。 – StevenNunez

+0

両方とも正しいです、それはあなたとあなたのスキルに依存します – andrescabana86

5

を設定する必要はありませんでした。

例:このため

app.get('/otherurl/' , function(req, res){ 
    res.render(__dirname + '/../other_project/views/index') 
}); 
関連する問題