Использование шаблонов Jade в Backbone.js

Мне нравится HAML-подобный синтаксис механизма шаблонов Jade в Node.js, и я хотел бы использовать его на стороне клиента в Backbone.js.

Я видел, как Backbone обычно использует шаблоны Underscore.js в следующем стиле.

/* Tunes.js */
window.AlbumView = Backbone.View.extend({
  initialize: function() {
    this.template = _.template($('#album-template').html());
  },

  // ...
});

/* Index.html */
<script type="text/template" id="album-template">
  <span class="album-title"><%= title %></span>
  <span class="artist-name"><%= artist %></span>
  <ol class="tracks">
    <% _.each(tracks, function(track) { %>
      <li><%= track.title %></li>
    <% }); %>
  </ol>
</script>

Я хотел бы увидеть способ использования AJAX (или другого метода) для извлечения шаблонов Jade и их отображения в текущем HTML.


javascript pug backbone.js underscore.js
person Josh Smith    schedule 16.12.2011    source источник
comment
github.com/gruntjs/grunt-contrib-jade компилирует jade в функции шаблона js с {client: true}. Это не выборка AJAX, но похоже, что она может делать то, что вам нужно.   -  person sam    schedule 18.04.2013
comment
Собственный компилятор jade может компилировать шаблоны в клиентский JS с параметром --client. Однако перед визуализацией этих шаблонов необходимо включить среду выполнения Jade. Есть еще один проект, clientjade, который делает это еще проще.   -  person mpen    schedule 13.12.2013

Ответы (5)


arrow_upward
23
arrow_downward

Мне удалось запустить Jade на стороне клиента с помощью проекта jade-browser.

Интеграция с Backbone становится простой: вместо _template() я использую jade.compile().

HTML (скрипты и шаблон):

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

<script type="template" id="test">
div.class1
  div#id
    | inner
  div#nav
    ul(style='color:red')
      li #{item}
      li #{item}
      li #{item}
      li #{item}
script
  $('body').append('i am from script in jade')
</script>

JavaScript (интеграция с Backbone.View):

var jade = require("jade");

var TestView = Backbone.View.extend({

  initialize: function() {
    this.template = jade.compile($("#test").text());
  },

  render: function() {
    var html = this.template({ item: 'hello, world'});
    $('body').append(html);
  }
});

var test = new TestView();
test.render();

ЗДЕСЬ это код.

person kubetz    schedule 16.12.2011
comment
Искал это, чтобы использовать Jade на стороне клиента. Я использую Backbone, requirejs в Express. Я не понимаю, как использовать проект браузера Jade. Нужно ли мне что-либо устанавливать с помощью npm или просто ссылаться на файлы js. И как настроить его в требуемых файлах конфигурации? - person Sami; 11.12.2013
comment
В вашем примере говорится: ReferenceError: требование не определено в null.jsbin.com/runner:1:771 - person Phil; 19.11.2014

arrow_upward
14
arrow_downward

Как упоминалось выше @dzejkej, одним из самых известных способов использования шаблонов Jade на клиенте является использование jade-browser; однако у меня всегда были проблемы с Jade в браузере.

  • Компиляция шаблонов Jade выполняется медленно — это нормально, но на самом деле все шаблоны должны быть кэшированы, и если вы кэшируете их на клиенте, каждый раз, когда они загружают новую страницу, кэш исчезает (если только не используется постоянный HTML5). хранилище, например).
  • Включение файлов может быть проблематичным и может привести к чрезмерному раздуванию. Если вы компилируете шаблоны Jade в браузере, и шаблон содержит операторы include, возможно, вам придется проделать дополнительную работу, чтобы правильно их скомпилировать. Кроме того, если вы решите скомпилировать на сервере и отправить JavaScript клиенту, у вас все еще будут проблемы. Всякий раз, когда в шаблонах Jade используются включения файлов, ваши скомпилированные шаблоны Jade могут стать довольно большими, поскольку они содержат один и тот же код снова и снова. Например, если вы включаете один и тот же файл снова и снова, содержимое этого файла будет загружаться в браузер несколько раз, что приведет к нерациональному использованию полосы пропускания.
  • Отсутствие поддержки. Jade предоставляет небольшую поддержку клиентских шаблонов из коробки. Да, вы можете использовать вариант компилятора {client: true}, но скомпилированные шаблоны действительно не оптимизированы для клиента, и, кроме того, отсутствует механизм подачи скомпилированных шаблонов Jade в браузер.

Это одна из причин, по которой я создал проект Blade. Blade — это язык шаблонов, похожий на Jade, который прямо из коробки поддерживает шаблоны на стороне клиента. Он даже поставляется с промежуточным ПО Express, предназначенным для предоставления скомпилированных шаблонов в браузер. Если вас устраивает Jade-подобная альтернатива для ваших проектов, проверьте ее!

person BMiner    schedule 13.06.2012

arrow_upward
4
arrow_downward

Я только что открыл исходный код проекта nodejs под названием «ассет-стойка», который может предварительно скомпилировать нефритовые шаблоны и предлагать их в браузере как функции javascript.

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

Архитектура немного отличается от того, что вы упомянули, всего один файл js для всех шаблонов с именем «templates.js» или что угодно.

Вы можете проверить это здесь, https://github.com/techpines/asset-rack#jadeasset< /а>

Сначала вы настраиваете его на сервере следующим образом:

new JadeAsset({
    url: '/templates.js',
    dirname: __dirname + '/templates'
});

Если каталог вашего шаблона выглядел так:

templates/
  navbar.jade
  user.jade
  footer.jade

Затем все ваши шаблоны попадают в браузер под переменной «Шаблоны»:

$('body').append(Templates.navbar());
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'});
$('body').append(Templates.footer());

Во всяком случае, надеюсь, что это поможет.

person Brad C    schedule 11.07.2012
comment
Отлично, нам нужен JST для Node! - person Maxence De Rous; 03.03.2013
comment
@Maks Я рекомендую использовать jade-browser-middleware, код довольно прост, поэтому вы возможно, вы захотите просто скопировать необработанный index.js из репозитория и добавить его в свою библиотеку. - person Cole Lawrence; 23.07.2014
comment
Я совершенно не уверен, как это использовать. Не могли бы вы обновить это синопсисом? Что такое ДжейдАссет? Это был экспорт активов? - person Evan Carroll; 17.11.2014
comment
ПРИМЕЧАНИЕ. Asset-Rack не поддерживает ни Express 4 (последняя версия), ни Jade 1.x (последняя версия). Работа над ним не велась уже год. - person Evan Carroll; 17.11.2014

arrow_upward
0
arrow_downward

Вы также можете проверить мою новую библиотеку для jade внутри браузера. Это так же просто, как ‹ jade>...‹ /jade>. https://github.com/charlieamer/jade-query

person charlieamer    schedule 16.09.2014

arrow_upward
0
arrow_downward

Вы не получите всю мощь шаблонов Jade, но вы можете немного изменить его, чтобы заставить jade правильно выводить шаблоны подчеркивания, ключ в том, чтобы не дать jade экранировать теги <%> с помощью оператора !, вот так:

script#dieTemplate(type='text/template')
    .die(class!='value-<%= value %>')
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-star
person DigitalDesignDj    schedule 14.10.2015