Использование Jade Templates (jade-lang.com) на стороне клиента

Ответ 1

P.S: Вероятно, сейчас Ответ на подменю лучше.

browserify

Возможно, вы можете использовать https://github.com/substack/node-browserify

Сторона браузера require() для вашего nodeмодулей и пакетов npm

Просто укажите файл javascript или два на пересканировать, и он будет ходить по AST прочитайте все ваши require() s рекурсивно. Получающийся пакет имеет все вам нужно, включая втягивание библиотеки, которые вы, возможно, установили используя npm!

Браузер

http://jsperf.com/dom-vs-innerhtml-based-templating/53 = > Производительность не так велика в соответствии с этим эталоном = > http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js. Но, согласно TJ, он никогда не должен использоваться в браузере, но вместо этого был node.js. В этом случае это будет довольно быстро. Существует много альтернатив, которые вы можете использовать в браузере.

Ответ 2

Если вы используете browserify, вы можете использовать это удобное промежуточное программное обеспечение jade: jadeify. Затем вы можете просто вызвать jadeify("foo.jade", { x : 4, y : 5 }) сторону браузера после указания каталога представлений в промежуточном программном обеспечении, и вы вернете дескриптор jquery.

Ответ 3

Оформить заказ Blade. Это Jade-подобный механизм шаблонов HTML, который предназначен для использования на стороне клиента (и на стороне сервера). Есть и другие функции, которые вам также могут понравиться.

EDIT: Но только для серверов Node.js. В настоящее время реализация Ruby отсутствует.

Ответ 4

Эта функция теперь доступна в 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 для вас.

Ответ 5

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

Ответ 6

Jade теперь поддерживает компиляцию для клиента по умолчанию; используйте параметр -c --client. См. http://jade-lang.com/command-line.

Ответ 7

Я только что создал библиотеку для создания jade в клиентском html. Это так же просто, как < нефритa > ... </Нефрит > . Проверьте это: https://github.com/charlieamer/jade-query

Ответ 8

Вот хакерская, но простая версия для 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'});

Таким образом, вы отправляете только клиенту конкретные шаблоны, которые вам нужны, и браузеру необходимо убедиться, что у вас есть только одна копия среды выполнения.