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

Мне нравится HAML-подобный синтаксис Jade templating engine в 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.

Ответ 1

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

Интеграция с базовой сетью проста: вместо _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();

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

Ответ 2

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

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

Вот некоторые из причин, по которым я создал проект промежуточным программным обеспечением, предназначенным для обслуживания скомпилированных шаблонов в браузере. Если у вас все в порядке с подобной Jade альтернативой для ваших проектов, проверьте это!

Ответ 3

Я просто открываю проект nodejs, называемый "актив-стойка", который может предварительно скомбинировать jade-шаблоны и предлагать их в браузере как функции 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());

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

Ответ 4

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

Ответ 5

Вы не получите полную мощность шаблонов 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