Использование шаблонов 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.

Источник

5 ответов

Решение

Я смог запустить 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();

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

Источник

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

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

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

Источник

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

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

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

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

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

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());

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

Источник

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

Источник

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