2014-11-27 8 views
5

Chcę użyć funkcji szablonów underscorejs. Wydaje się <template> tagu HTML5 byłaby niesamowita nadające się do tego, ale jest haczyk ... Tagi interpolacji underscore.js (<% i %> get html-uciekły, więc HTML wewnątrz tag szablon wygląda tak:Znacznik szablonu jquery i znacznika HTML5

$('template.new-email').html() 

=>

" 
    <div class="email"> 
    <div class="timestamp"> 
     &lt;%= received %&gt; 
    </div> 
    <div class="from"> 
     &lt;%= from %&gt; 
    </div> 
    <div class="title"> 
     &lt;%= title %&gt; 
    </div> 
    <div class="message"> 
     &lt;%= message %&gt; 
    </div> 
    </div> 
" 

Dobrze, że bani.

teraz, jak się okazuje, jeśli mogę użyć znacznika script w rodzaju fikcyjnej, jak „x-underscore- Szablony”, to wygląda klawy:

$('.new-email').html() 

=>

" 
    <div class="email"> 
    <div class="timestamp"> 
     <%= received %> 
    </div> 
    <div class="from"> 
     <%= from %> 
    </div> 
    <div class="title"> 
     <%= title %> 
    </div> 
    <div class="message"> 
     <%= message %> 
    </div> 
    </div> 
" 

Więc moje pytanie brzmi - czy mogę wykorzystać szablon? Jak uzyskać ciągi znaków, których potrzebuję, aby przekazać je do systemu szablonów podkreślenia?

Uwaga - ponieważ serwer, którego teraz używam, jest serwerem hapijs/node, który wykorzystuje kierownicę jako system szablonowy po stronie serwera, nie mogę po prostu użyć {{i}}.

Odpowiedz

6

Podoba mi się również pomysł użycia tagu szablonu i starałem się, aby szablony podkreślników działały w elemencie szablonu html5 na różne sposoby. Niestety, kod template element oznacza konkretnie szablon HTML, a treść zostanie przekształcona w fragment dokumentu, który nie jest odpowiedni dla wielu poprawnych szablonów podkreślenia, nawet jeśli później zostaną renderowane do prawidłowego html.

konsekwencji jedynym Wykorzystanie mogę zaproponować to, że może zachować elementy skryptowe zorganizowana w ramach elementu szablonu tak:

<template class="underscore-templates"> 
<script id="new-email"> 
    <div class="email"> 
    <div class="timestamp"> 
     <%= received %> 
    </div> 
    <div class="from"> 
     <%= from %> 
    </div> 
    <div class="title"> 
     <%= title %> 
    </div> 
    <div class="message"> 
     <%= message %> 
    </div> 
    </div> 
</script> 
<script id="other"> 
</script> 
</template> 

A potem są segregowane bezpiecznie robić takie rzeczy jak:

var templates = $('.underscore-templates').prop('content'); 
_.template($(templates).children('#new-email').html(), {...}); 

z elementem szablonu służącym jako zakres uniemożliwiający normalne problemy z kolizją id i wykonywanie tych szablonów jako skrypty.

(Mimo to, to byłaby ograniczona do nowoczesnych przeglądarek bez dość głębokości dochodzenia jak (albo jeśli) można odzyskać elementy szablon zawartości w starszych przeglądarkach i uczynić go do przeszukiwania fragmentu.)