Използване на 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: require не е дефинирано в null.jsbin.com/runner:1:771 - person Phil; 19.11.2014

arrow_upward
14
arrow_downward

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

  • Компилирането на Jade шаблони е бавно - което е добре, но наистина всички шаблони трябва да бъдат кеширани и ако ги кеширате на клиента, всеки път, когато заредят нова страница, кешът изчезва (освен ако не използвате HTML5 persistent съхранение, например).
  • Включването на файл може да бъде мъчно и да създаде излишно раздуване. Ако компилирате 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, наречен "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());

Както и да е, надявам се това да помогне.

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
Напълно не съм сигурен как да използвам това. Бихте ли актуализирали това със синопсис? Какво е JadeAsset? Това беше ли износ на активи? - 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 в браузъра. Толкова е просто като ‹ нефрит>...‹ /нефрит>. 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