2012-05-02 2 views
3

Я работаю с веб-сайтом, созданным с помощью Jade/Express в течение нескольких недель. Недавно я организовал папку изображений для веб-сайта, поэтому все изображения были переданы между несколькими папками, чтобы упростить их использование и сортировку.Как включить объекты Javascript в шаблон Jade перед составлением 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; 
} 

Я пробовал несколько методов, чтобы получить сценарий exe милый перед шаблоном. Вот одна из попыток:

В page.jade

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

выше, в теории, должен включать в себя JS, а затем я выполняю ниже имен, чтобы сделать доступные функции, но это не работает.

Это часть шаблона Джейд, которую я хочу использовать функцию:

В page.jadeпосле скрипта включают

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

Приведенный выше пример должен вернуть: «/img/glyphs/black/stopwatch.png»

Проблема, я считаю, что скрипты, которые я пытаюсь выполнить m ake доступная серверная сторона к шаблону нефрита не выполняется до создается нефритовый шаблон. Все, что я пытался делать, чтобы получить эту работу всегда приводит к ошибке о том, что сервер не распознает функцию getGlyph или когда я начал использовать функцию пространства имен, NamespacePathManager

Резюме: Я хочу файл javascript для выполнения до того, как шаблон jade будет отображаться на веб-странице, чтобы я мог вызывать функции и переменные из этого javascript на сервере для использования при рендеринге шаблона нефрита. Моя проблема в том, что все методы, которые я пытался, не могут выполнить javascript до того, как Jade будет отображаться.

Update Одна работа вокруг я нашел поставить JavaScript в небуферизованном код непосредственно на странице, включая нефрит.Это не совсем изящное решение, которое я искал, но сейчас он работает

- some code 
- more code 

Этот код выполнен в строгом соответствии. Недостатком является то, что я должен включать его на каждую страницу вручную - вместо того, чтобы просто включать его один раз и иметь функции, доступные повсюду.

ответ

2

Вы можете зарегистрировать методы-помощники в Express, которые затем будут доступны в представлениях.

Так что в вашем случае путь-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/

+0

Спасибо за ответ! Я дам эту попытку – JonathanRevell

+0

Это будет запускать 'getGlyph()' во время выполнения для каждого запроса, правильно? Есть ли способ иметь этот предварительно скомпилированный (express/jade helper), чтобы, например, искать активы в файле-манифеста-актива? – mediafreakch

+0

значения атрибутов в jade теперь позволяют javascript, поэтому вы можете написать 'img (src = getGlyph ('black', 'stopwatch.png'))' вместо того, чтобы использовать интерполяцию строк. – chharvey