비취 편집 전에 비취 템플릿에 자바 스크립트 개체를 포함하는 방법

Question

저는 몇 주 동안 비취/익스프레스로 구축 된 웹 사이트에서 작업하고 있습니다. 최근에 웹 사이트의 이미지 폴더를 구성하여 모든 이미지가 여러 폴더간에 분산되어 사용 및 정렬하기가 쉬워졌습니다.

이미지 (및 다른 파일)의 계층 구조를 변경하기 쉽게하기 위해 파일 경로에 대한 일부 전역을 포함하는 스크립트를 작성했습니다. 이제 스크립트를 실행하여 jade 템플릿 내부의 함수를 호출하여 이러한 전역 변수를 자동으로 사용할 수 있도록 노력했습니다.

예를 들면. 이미지는 이제 여러 폴더로 분류되어 있습니다 :

내 길 관리자 스크립트에서

img/ glyphs/ interactivity/ buttons/ ... 

, 나는 다음과 같은 몇 가지 기능, 생성 된 파일 계층 구조 :

에서 : 경로 manager.js을

images_root_path = "/img/"; 
glyph_path = images_root_path + "glyphs/"; 
function getGlyph(color, name) { 
    return glyph_path + color + "/" + name; 
} 

나는 여러 가지 방법으로 스크립트를 실행시켜야했다. 귀여운 전에 템플릿. 여기에 시도 중 하나입니다

page.jade 에서

include ../../../public/js/lib/path-manager.js 
=NamespacePathManager(); 

제 1, 이상, 이론적으로는 JS를 포함하기로하고 나는 기능을 사용할 수 있도록 아래의 네임 스페이스를 실행하지만, 그게 작동하지 않습니다. 스크립트 후위 예 돌려

span.challenge-time 
    img(src=getGlyph("black","stopwatch.png"), style="margin-right:5px;") 

포함

page.jade 물 :

이

난의 기능을 사용할 옥 템플릿의 일부이다 : "/img/glyphs/black/stopwatch.png"

문제는, 제가 생각하기에 스크립트가 jade 템플릿에 사용할 수있는 서버 쪽이 실행되지 않고 있습니다. 전에 옥 템플릿이 렌더링됩니다. 내가하고 시도 다이 항상 작동 서버가 기능 getGlyph를 인식하지 않거나 없다는 오류가 발생하는 얻을 나는 네임 스페이스 기능, NamespacePathManager

이 요약 사용하기 시작 때 내가 원하는을 jade 템플릿이 웹 페이지로 렌더링되기 전에 실행할 javascript 파일을 사용하여 jade 템플릿을 렌더링하는 동안 사용할 자바 스크립트의 함수 및 변수를 서버에서 호출 할 수 있습니다. 제 문제는 비취가 렌더링되기 전에 내가 시도한 모든 메소드가 자바 스크립트를 실행할 수 없다는 것입니다.

업데이트 옥션을 포함한 페이지에 자바 스크립트를 직접 버퍼링되지 않은 코드에 넣는 것이 하나의 해결책입니다.이것은 내가 찾던 멋진 해결책이 아니지만 지금은 작동합니다.

- some code 
- more code 

이 코드는 인라인으로 실행됩니다. 단점은 모든 페이지에 수동으로 포함시켜야한다는 것입니다. 한 번만 사용하고 모든 곳에서 사용할 수있는 기능이 있어야합니다.

Answer 1

익스프레스에 도우미 메소드를 등록 할 수 있으며 뷰에서 액세스 할 수 있습니다. 귀하의 경우 그래서

에서, 경로 manager.js가 등록 도우미 파일을 할 수 있으며, 포함

var images_root_path = "/img/"; 
var glyph_path = images_root_path + "glyphs/"; 

exports.helpers = { 
    getGlyph: function (color, name) { 
    return glyph_path + color + "/" + name; 
    } 

    // Other helper methods here.. 
}; 

을 다음 급행 서버를 설정할 때, 당신은 도우미를 등록

마지막으로

var app = express.createServer(); 

// app.configure here... 
// app.use ... 

app.helpers(require('./path-manager.js').helpers); 

// Routes set up here .. 

, 당신은 다음과 같이 볼 옥에서 도우미 메서드를 호출 할 수

span.challenge-time 
    img(src='#{getGlyph("black","stopwatch.png")}', style='margin-right:5px;') 

DailyJS에서이 주제에 대한 좋은 글이 있습니다 http://dailyjs.com/2011/01/03/node-tutorial-8/