Использование шаблонов Jade в Backbone.js - PullRequest
Новая
       11

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

24 голосов
/ 16 декабря 2011

Мне нравится 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 ]

23 голосов
/ 16 декабря 2011

Я смог запустить Jade на стороне клиента, используя jade-browser project.

Интеграция с 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();

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

14 голосов
/ 13 июня 2012

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

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

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

4 голосов
/ 12 июля 2012

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

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

0 голосов
/ 14 октября 2015

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

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

...