2012-07-26 3 views
17

Peepcode의 Node.js Full Stack 비디오 작업을하고 있는데, 이전 버전의 express/jade를 사용하고있는 것으로 보입니다. block/extends를 사용하여 레이아웃을 렌더링하는 것에 대한 언급이 없습니다.Jade - 다른 디렉토리에서 템플릿로드하기

앱에 사용 된 설정은 모든 하위 앱에로드되는 /views/layout.jade 파일을 갖는 것입니다. 하위 애플 리케이션의보기는/apps // views에 있습니다.

내 server.js는 꽤 표준적인 것처럼 보입니다. 익스프레스 버전 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')); 
}); 

routes.coffee

routes = (app) -> 

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

module.exports = routes 

I가 렌더링하려는보기 이.

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

.

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

로컬 호스트로가는 :

익스프레스 500 오류 : 3000/로그인이 렌더링 /Users/StevenNunez/code/HotPie/apps/authentication/views/login.jade:1> 1 | 레이아웃 2 | 3 | 콘텐츠 차단 4 | 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') 

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

+0

ok ... 잘 작동합니다 ... 그러나 확장 메서드로 작업 할 올바른 방법이기 때문에 앱을 설정하십시오. – andrescabana86

+6

동일한 튜토리얼을 통해 작업하고 있습니다. 같은 문제. 웬일인지 'extend ../../../views/layout'을 사용하는 것이 편안하지 않습니다. 이것에 대한 대안이 있습니까? – Feech

+0

굉장합니다. 정확히 필요한 것! – Hcabnettek

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

감사합니다. "올바른"방법 또는 렌더링이란 무엇입니까? 나는 노드/익스프레스/옥으로 들어가기 때문에 커뮤니티에서 정한 규칙을 따르고 싶습니다. – StevenNunez

+0

모두 맞습니다. 당신과 당신의 기술에 따라 달라집니다. – andrescabana86

5

당신은 다른 디렉토리에서 뷰를 연결하는 변수 __dirname를 사용하여 설정하지 않았다.

예 : 이것에 대한

app.get('/otherurl/' , function(req, res){ 
    res.render(__dirname + '/../other_project/views/index') 
});