Я хотел бы использовать шаблоны Jade на стороне клиента. Предпочтительно создаваться с использованием конвейера ресурсов Rails 3.1. Я не могу понять, как это сделать.
Кто-нибудь сталкивался с такой же проблемой и нашел отличное решение? Любые мысли очень ценятся.
P.S. Вероятно, сейчас ответ Substack лучше.
Возможно, вы можете использовать https://github.com/substack/node-browserify
Требование() на стороне браузера для ваших узловых модулей и пакетов npm
Просто укажите один или два файла javascript в browserify, и он будет проходить через AST, чтобы рекурсивно прочитать все ваши require(). В полученном пакете есть все, что вам нужно, включая библиотеки, которые вы могли установить с помощью npm!
http://jsperf.com/dom-vs-innerhtml-based-templating/53 => Судя по этому тесту, производительность не так велика => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js. Но, по словам TJ, он никогда не должен был использоваться в браузере, а вместо него использовался node.js. В таком случае это будет довольно быстро. Есть много альтернатив, которые вы можете использовать вместо этого в браузере.
Если вы используете browserify, вы можете использовать это удобное промежуточное ПО jade: jadeify. Затем вы можете просто вызвать jadeify("foo.jade", { x : 4, y : 5 }) на стороне браузера после указания каталога представлений на промежуточное программное обеспечение, и вы получите дескриптор jquery.
Оформить Blade. Это механизм шаблонов HTML, похожий на Jade, который предназначен для использования на стороне клиента (и на стороне сервера). Есть и другие функции, которые могут вам понравиться.
EDIT: Но только для серверов Node.js. В настоящее время нет реализации Ruby.
Эта функция теперь доступна в Jade. http://jade-lang.com/api/
Из их документации по API:
var jade = require('jade');
// Compile jade file to a function
var fn = jade.compileClient('string of jade', options);
// Later in client site, render the function to HTML
var html = fn(locals);
Вы должны передать скомпилированную функцию javascript клиенту, например, записав функцию (fn в примере) в файл .js, а затем включив файл .js в файл html с тегом script.
Другой вариант — использовать templatizer, который компилирует jade в файл .js для вас.
Я написал гем под названием tilt-jade, чтобы сделать это в конвейере ресурсов. Он работает точно так же, как EJS работает со звездочками по умолчанию — он преобразует шаблоны Jade в функции, чтобы их можно было назвать клиентскими. Я не уверен, что это отличное решение, но оно сработало для моих нужд.
Я только что сделал библиотеку для того, чтобы сделать jade доступным в html на стороне клиента. Это так же просто, как ‹ jade>...‹ /jade>. Проверьте это: https://github.com/charlieamer/jade-query
Jade теперь по умолчанию поддерживает компиляцию для клиента; используйте опцию -c --client. См. http://jade-lang.com/command-line.
Вот хакерская, но простая версия для browserify с использованием gulp-jade.
var jade = require('gulp-jade'),
replace = require('gulp-replace');
gulp.task('jade-client', function() {
gulp.src('./views/**/*.jade')
.pipe(jade({
client: true
}))
.pipe(replace(/function template/g, 'var jade = require("gulp-jade/node_modules/jade/lib/runtime");\n\nmodule.exports = function'))
.pipe(gulp.dest('./client/templates'));
});
Затем в моем JS-файле на стороне клиента...
var template = require('./path_to_compiled_template_file');
var renderedTemplateHtml = template({ aLocal: 'blah blah'});
Таким образом, вы отправляете клиенту только те шаблоны, которые вам нужны, а браузер позволяет убедиться, что у вас есть только одна копия среды выполнения.
