Backbone.js에서 Jade 템플릿 사용하기

Question

Jade 템플릿 엔진의 HAML과 유사한 구문을 Node.js에서 좋아합니다. Backbone.js에서 클라이언트 쪽을 사용하고 싶습니다.

다음 스타일로 템플릿을 작성하는 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> 

옥 템플릿을 가져오고 현재 HTML 내에서 렌더링하는 AJAX (또는 다른 방법)을 사용하는 방법입니다.

Answer 1

jade-browser 프로젝트를 사용하여 Jade 클라이언트 측을 실행할 수있었습니다.

백본과의 통합은 간단합니다. _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> 

자바 스크립트 (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(); 

HERE는 코드입니다.

Answer 2

위에서 언급 한 @dzejkej와 마찬가지로 클라이언트에서 옥 템플릿을 사용하는 가장 잘 알려진 방법 중 하나는 jade-browser를 사용하는 것입니다. 그러나 브라우저에서 Jade와 관련하여 몇 가지 문제가있었습니다. 옥 템플릿을 컴파일

• 느린입니다 - 괜찮지 만, 정말 모든 템플릿 캐시해야하며, 클라이언트에 그들을 캐시 경우, 언제 그들이 새로운 페이지를로드하는 캐시는 HTML5를 사용하지 않는 한 (사라 영구 저장 장치).
• 파일에 포함될 수있는 고통은 과도한 부풀림을 유발할 수 있습니다. 브라우저에서 Jade 템플릿을 컴파일 중이고 템플릿에 include 문장이 포함되어있는 경우 제대로 컴파일하려면 추가 작업을해야 할 수도 있습니다. 또한 서버에서 컴파일하고 JavaScript를 클라이언트에 보내려는 경우에도 여전히 문제가 있습니다. Jade 템플릿이 파일 include를 사용할 때마다 컴파일 된 Jade 템플릿은 반복적으로 동일한 코드를 포함하기 때문에 상당히 커질 수 있습니다. 예를 들어 동일한 파일을 반복해서 포함하면 해당 파일의 내용이 브라우저에 여러 번 다운로드되어 대역폭이 낭비됩니다.
• 지원 부족 - Jade는 클라이언트 측 템플릿을 거의 지원하지 않습니다. 예, {client: true} 컴파일러 옵션을 사용할 수 있지만 컴파일 된 템플릿은 실제로 클라이언트에 최적화되어 있지 않으며 컴파일 된 Jade 템플릿을 브라우저에 제공하는 메커니즘도 없습니다.

다음은 내가 Blade project을 만든 이유 중 일부입니다. Blade는 클라이언트 측 템플릿을 즉시 지원하는 옥과 같은 템플릿 언어입니다. Express middleware designed for serving compiled templates to the browser과 함께 배송됩니다. 프로젝트에 옥과 같은 대안이 있다면 괜찮은가요?

• https://github.com/bminer/node-blade
• https://github.com/bminer/node-blade#blademiddlewaresourcepath-options
• https://github.com/bminer/node-blade#browser-usage

Answer 3

나는 단지 열린 nodejs라는 프로젝트 "자산 랙", 즉 옥 템플릿을 미리 컴파일하고 자바 스크립트와 브라우저에서 제공 할 수있는 수를 공급 기능.

브라우저에 컴파일 단계가 없으므로 렌더링 속도가 놀랍도록 빠르며 마이크로 템플릿보다 빠릅니다.

아키텍처는 "템플릿 .js"또는 원하는 모든 템플릿에 대해 하나의 js 파일을 언급 한 것과 약간 다릅니다. 다음과 같이

당신은 서버에 그것을 설정, 여기 https://github.com/techpines/asset-rack#jadeasset

먼저 그것을 확인하실 수 있습니다 : 다음

templates/ 
    navbar.jade 
    user.jade 
    footer.jade 

:

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

는 템플릿 디렉토리가이처럼 보였다 경우 모든 템플릿은 브라우저의 '템플릿'변수 아래에 있습니다.

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

어쨌든 도움이 되길 바랍니다.

Answer 4

내 새 라이브러리의 브라우저에서 jade를 체크 아웃 할 수도 있습니다. 그것은 < 옥> ... </옥>처럼 간단합니다. , https://github.com/charlieamer/jade-query

Answer 5

당신은 옥 템플릿의 모든 기능을받지 않습니다 만, 옥 제대로 출력 밑줄 템플릿, 키가 ! 연산자로 <%> 태그를 탈출 옥을 방해하는 얻을 수 은 그것을 조금 해킹 할 수 이렇게 :

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