wake-up-neo.com

Jade-Vorlagen in Backbone.js verwenden

Ich liebe die HAML-ähnliche Syntax von Jades Templating-Engine in Node.js und würde sie gerne in Backbone.js clientseitig verwenden.

Ich habe gesehen, wie Backbone üblicherweise Underscore.js im folgenden Stil verwendet.

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

Was ich gerne sehen würde, ist eine Möglichkeit, AJAX (oder eine andere Methode) zu verwenden, um Jade-Templates abzurufen und sie im aktuellen HTML-Code zu rendern.

24
Josh Smith

Ich konnte Jade clientseitig mit jade-browser project ausführen.

Die Integration mit Backbone ist dann einfach: Anstelle von _template() verwende ich jade.compile().

HTML (Skripte und Vorlage):

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

HIER ISTder Code.

23
kubetz

Wie @dzejkej erwähnt, ist die Verwendung von Jade-Templates auf dem Client die bekannteste Art, Jade-Browser zu verwenden. Ich hatte jedoch immer ein paar Probleme mit Jade im Browser.

  • Das Kompilieren von Jade-Templates ist langsam - was in Ordnung ist, aber eigentlich sollten alle Templates zwischengespeichert werden. Wenn Sie sie auf dem Client zwischenspeichern, verschwindet der Cache jedes Mal, wenn eine neue Seite geladen wird (sofern nicht der permanente HTML5-Speicher verwendet wird) , zum Beispiel).
  • Dateieinschließungen können Schmerzen verursachen und übermäßiges Aufblähen verursachen. Wenn Sie Jade-Templates im Browser kompilieren und die Vorlage include-Anweisungen enthält, müssen Sie möglicherweise zusätzliche Arbeit erledigen, damit sie korrekt kompiliert werden. Wenn Sie sich dazu entscheiden, auf dem Server zu kompilieren und JavaScript an den Client zu senden, haben Sie immer noch Probleme. Immer wenn Jade-Vorlagen Dateieinschlüsse verwenden, können Ihre kompilierten Jade-Vorlagen ziemlich groß werden, da sie immer wieder denselben Code enthalten. Wenn Sie beispielsweise immer wieder dieselbe Datei einfügen, wird der Inhalt dieser Datei mehrmals in den Browser heruntergeladen, wodurch Bandbreite verschwendet wird.
  • Unzureichende Unterstützung - Jade bietet keine Unterstützung für clientseitige Vorlagen. Ja, Sie können die Compileroption {client: true} verwenden, aber die kompilierten Vorlagen sind wirklich nicht für den Client optimiert. Außerdem gibt es keinen Mechanismus zum Bereitstellen kompilierter Jade-Vorlagen an den Browser.

Dies ist einer der Gründe, warum ich das Blade-Projekt erstellt habe. Blade ist eine Jade-artige Templatesprache, die clientseitige Vorlagen direkt unterstützt. Es wird sogar mit Express Middleware ausgeliefert, die dafür ausgelegt ist, dem Browser kompilierte Vorlagen bereitzustellen . Wenn Sie mit einer jadeähnlichen Alternative für Ihre Projekte zufrieden sind, probieren Sie es aus!

14
BMiner

Ich habe gerade ein nodejs-Projekt namens "Asset-Rack" geöffnet, das Jade-Templates vorkompilieren und im Browser als Javascript-Funktionen anbieten kann.

Dies bedeutet, dass das Rendern extrem schnell ist und sogar schneller als Mikroschablonen ist, da der Browser keinen Übersetzungsschritt enthält. 

Die Architektur unterscheidet sich ein wenig von dem, was Sie erwähnen, nur eine js-Datei für alle Templates, die als "templates.js" bezeichnet wird, oder was immer Sie möchten.

Sie können es hier ausprobieren, https://github.com/techpines/asset-rack#jadeasset

Zuerst richten Sie es auf dem Server wie folgt ein:

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

Wenn das Vorlagenverzeichnis so aussah:

templates/
  navbar.jade
  user.jade
  footer.jade

Dann werden alle Ihre Vorlagen unter der Variablen "Vorlagen" im Browser angezeigt:

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

Wie auch immer, hoffe das hilft.

4
Brad C

Sie erhalten nicht die volle Leistungsfähigkeit von Jade-Templates, aber Sie können can hack ein wenig, um Jade dazu zu bringen, Unterstriche korrekt auszugeben. Der Schlüssel verhindert, dass Jade die <%>-Tags mit dem !-Operator fluchtet, wie so:

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

Sie können auch meine neue Bibliothek auf Jade im Browser überprüfen. Es ist so einfach wie <jade> ... </ jade>. https://github.com/charlieamer/jade-query

0
charlieamer