web-dev-qa-db-fra.com

Utilisation de modèles Jade dans Backbone.js

J'adore la syntaxe HAML du moteur de création de modèles de Jade dans Node.js, et j'aimerais bien l'utiliser côté client dans Backbone.js.

J'ai souvent vu Backbone utiliser les modèles Underscore.js dans le style suivant.

/* 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>

Ce que j'aimerais voir, c’est un moyen d’utiliser AJAX (ou une autre méthode) pour récupérer des modèles Jade et les restituer dans le code HTML actuel.

javascriptbackbone.jspugunderscore.js
24
Josh Smith

J'ai pu exécuter Jade côté client en utilisant jade-browser project.

L'intégration à Backbone est alors simple: au lieu de _template(), j'utilise jade.compile().

HTML (scripts et template): 

<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 (intégration avec 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();

ICIest le code.

23
kubetz

Comme @dzejkej mentionné ci-dessus, l’un des moyens les plus connus d’utiliser les modèles Jade sur le client consiste à utiliser le navigateur jade; Cependant, j'ai toujours eu quelques problèmes avec Jade dans le navigateur.

  • La compilation des modèles Jade est lente - ce qui est correct, mais en réalité, tous les modèles doivent être mis en cache. Si vous les mettez en cache sur le client, à chaque fois qu'ils chargent une nouvelle page, le cache disparaît (sauf si vous utilisez le stockage permanent HTML5 , par exemple).
  • Le fichier inclus peut être pénible et créer un excès de ballonnement. Si vous compilez des modèles Jade sur le navigateur et que celui-ci contient des instructions include, vous devrez peut-être effectuer un travail supplémentaire pour les compiler correctement. En outre, si vous décidez de compiler sur le serveur et d'envoyer du code JavaScript au client, vous rencontrez toujours des problèmes. Chaque fois que les modèles Jade utilisent un fichier, vos modèles Jade compilés peuvent devenir assez volumineux car ils contiennent le même code à plusieurs reprises. Par exemple, si vous incluez le même fichier à plusieurs reprises, son contenu sera téléchargé plusieurs fois sur le navigateur, ce qui gaspille de la bande passante.
  • Manque de support - Jade fournit peu de support pour les modèles côté client prêts à l'emploi. Oui, vous pouvez utiliser l'option de compilation {client: true}, mais les modèles compilés ne sont vraiment pas optimisés pour le client. De plus, il n'existe aucun mécanisme permettant de servir les modèles Jade compilés au navigateur.

C’est l’une des raisons pour lesquelles j’ai créé le projet Blade . Blade est un langage de templates semblable à Jade qui prend en charge les modèles côté client dès la sortie de la boîte. Il est même livré avec Express middleware conçu pour servir les modèles compilés au navigateur . Si vous êtes d'accord avec une alternative de type Jade pour vos projets, jetez-y un coup d'œil!

14
BMiner

Je viens d’ouvrir un projet nodejs, appelé "asset-rack", qui peut précompiler des modèles de jade et les proposer dans le navigateur sous forme de fonctions javascript.

Cela signifie que le rendu est extrêmement rapide, voire plus rapide que les micro-modèles, car il n'y a pas d'étape de compilation dans le navigateur. 

L'architecture est un peu différente de ce que vous mentionnez, juste un fichier js pour tous les modèles appelés "templates.js" ou ce que vous voulez.

Vous pouvez le vérifier ici, https://github.com/techpines/asset-rack#jadeasset

Tout d'abord, vous le configurez sur le serveur comme suit:

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

Si votre répertoire de modèles ressemblait à ceci:

templates/
  navbar.jade
  user.jade
  footer.jade

Ensuite, tous vos modèles entrent dans le navigateur sous la variable "Modèles":

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

Quoi qu'il en soit, espérons que cela aide.

4
Brad C

Vous n’obtiendrez pas toute la puissance des modèles Jade, mais vous pouvez le bidouiller un peu pour que jade produise correctement les modèles de soulignement, la clé empêche jade d’échapper aux balises <%> avec l’opérateur !, comme alors:

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
DigitalDesignDj

Vous pouvez également consulter ma nouvelle bibliothèque pour le jade dans le navigateur. C'est aussi simple que <jade> ... </ jade>. https://github.com/charlieamer/jade-query

0
charlieamer