it-swarm-pt.tech

Usando modelos Jade no Backbone.js

Eu amo a sintaxe semelhante ao HAML do mecanismo de modelagem do Jade no Node.js. Gostaria de usá-lo no lado do cliente no Backbone.js.

Eu vi o Backbone normalmente usando o modelo Underscore.js no seguinte estilo.

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

O que eu gostaria de ver é uma maneira de usar AJAX (ou algum outro método) para buscar modelos Jade e renderizá-los no HTML atual.

24
Josh Smith

Consegui executar o Jade no lado do cliente usando o projeto jade-browser .

A integração com o Backbone é simples: em vez de _template() eu estou usando jade.compile().

HTML (scripts e modelo):

<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 (integração com o 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();

AQUI é o código.

23
kubetz

Como o @dzejkej mencionado acima, uma das maneiras mais conhecidas de usar modelos Jade no cliente é usar o navegador jade; no entanto, sempre tive alguns problemas com o Jade no navegador.

  • A compilação de modelos Jade é lenta - o que é bom, mas na verdade todos os modelos devem ser armazenados em cache e, se você os armazenar em cache no cliente, sempre que carregar um nova página, o cache desaparece (a menos que esteja usando armazenamento persistente HTML5, por exemplo).
  • O arquivo inclui pode ser um problema e pode criar inchaço excessivo. Se você estiver compilando modelos Jade no navegador e o modelo contiver instruções include , talvez você precise fazer um trabalho extra para que eles sejam compilados corretamente. Além disso, se você decidir compilar no servidor e enviar JavaScript ao cliente, ainda terá problemas. Sempre que os modelos Jade usam o arquivo include, seus modelos compilados Jade podem ficar grandes porque contêm o mesmo código repetidamente. Por exemplo, se você incluir o mesmo arquivo repetidamente, o conteúdo desse arquivo será baixado para o navegador várias vezes, o que está desperdiçando largura de banda.
  • Falta de suporte - O Jade fornece pouco suporte para modelos do lado do cliente prontos para uso. Sim, você pode usar o {client: true} opção de compilador, mas os modelos compilados realmente não são otimizados para o cliente e, além disso, não há mecanismo para exibir modelos Jade compilados no navegador.

Estas são algumas das razões pelas quais criei o projeto Blade . O Blade é uma linguagem de modelagem semelhante ao Jade que suporta modelos do lado do cliente imediatamente. É fornecido com o Express middleware projetado para veicular modelos compilados no navegador . Se você concorda com uma alternativa semelhante ao Jade para seus projetos, confira!

14
BMiner

Acabei de abrir um projeto nodejs, chamado "asset-rack", que pode pré-compilar modelos de jade e oferecê-los no navegador como funções javascript.

Isso significa que a renderização é incrivelmente rápida, ainda mais rápida que os micro-modelos, porque não há etapa de compilação no navegador.

A arquitetura é um pouco diferente do que você mencionou, apenas um arquivo js para todos os modelos chamados "templates.js" ou o que você quiser.

Você pode conferir aqui, https://github.com/techpines/asset-rack#jadeasset

Primeiro você o configura no servidor da seguinte maneira:

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

Se o diretório do seu modelo estiver assim:

templates/
  navbar.jade
  user.jade
  footer.jade

Todos os seus modelos entram no navegador sob a variável "Modelos":

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

Enfim, espero que ajude.

4
Brad C

Você não terá todo o poder dos modelos Jade, mas pode hackear um pouco para que o jade produza corretamente modelos de sublinhado, a chave é impedir que o jade escape do <%> tags com os ! operador, assim:

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

Você também pode verificar minha nova biblioteca para ver o jade dentro do navegador. É tão simples quanto <jade> ... </ jade>. https://github.com/charlieamer/jade-query

0
charlieamer