Sử dụng các mẫu Jade trong Backbone.js

Question

Tôi thích cú pháp giống như HAML của công cụ tạo khuôn mẫu của Jade trong Node.js và tôi rất thích sử dụng nó phía máy khách trong Backbone.js.

Tôi đã nhìn thấy Backbone thường sử dụng khuôn mẫu Underscore.js theo kiểu sau.

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

Điều tôi muốn thấy là cách sử dụng AJAX (hoặc một số phương pháp khác) để tìm nạp mẫu Jade và hiển thị chúng trong HTML hiện tại.

Answer 1

Tôi có thể chạy Jade phía máy khách bằng cách sử dụng dự án jade-browser.

Tích hợp với Backbone sau đó đơn giản: Thay vì _template() Tôi đang sử dụng jade.compile().

HTML (kịch bản và mẫu):

<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 (tích hợp với 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 là mã.

Answer 2

Như @dzejkej đã đề cập ở trên, một trong những cách nổi tiếng nhất để sử dụng các mẫu Jade trên máy khách là sử dụng trình duyệt ngọc bích; tuy nhiên, tôi luôn gặp một số vấn đề với Jade trong trình duyệt.

• Biên soạn Jade mẫu là chậm - đó là okay, nhưng thực sự, tất cả các mẫu nên được lưu trữ, và nếu bạn nhớ cache họ trên máy khách, bất cứ lúc nào họ tải một trang mới, bộ nhớ cache sẽ biến mất (trừ khi sử dụng HTML5 lưu trữ liên tục, chẳng hạn).
• Tệp bao gồm có thể là một nỗi đau và có thể tạo ra sưng lên quá mức. Nếu bạn đang biên dịch các mẫu Jade trên trình duyệt và mẫu chứa các câu lệnh include, bạn có thể phải thực hiện thêm một số công việc để có thể biên dịch chúng đúng cách. Ngoài ra, nếu bạn quyết định biên dịch trên máy chủ và gửi JavaScript cho máy khách, bạn vẫn gặp sự cố. Bất cứ khi nào các mẫu Jade sử dụng tập tin bao gồm, các mẫu Jade biên dịch của bạn có thể nhận được khá lớn bởi vì chúng chứa cùng một mã hơn và hơn. Ví dụ, nếu bạn bao gồm cùng một tập tin một lần nữa và một lần nữa, nội dung của tập tin đó sẽ được tải xuống trình duyệt nhiều lần, đó là lãng phí băng thông.
• Thiếu sự hỗ trợ - Jade cung cấp ít sự hỗ trợ cho các mẫu phía máy khách ra khỏi hộp. Có, bạn có thể sử dụng tùy chọn biên dịch {client: true}, nhưng các mẫu được biên dịch thực sự không được tối ưu hóa cho máy khách và ngoài ra, không có cơ chế để phục vụ các mẫu Jade đã biên dịch cho trình duyệt.

Đây là một số lý do tôi tạo ra Blade project. Blade là ngôn ngữ khuôn mẫu giống như Ngọc hỗ trợ các mẫu phía máy khách ngay bên ngoài hộp. Nó thậm chí còn giao hàng với Express middleware designed for serving compiled templates to the browser. Nếu bạn không sao với lựa chọn thay thế giống Ngọc cho dự án của bạn, hãy kiểm tra nó!

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

Answer 3

tôi chỉ cần mở nguồn một dự án nodejs, được gọi là "tài sản giá", mà có thể có thể precompile mẫu ngọc bích và cung cấp cho họ trong trình duyệt như javascript chức năng.

Điều này có nghĩa là hiển thị nhanh, nhanh hơn các mẫu vi mô vì không có bước biên dịch trong trình duyệt.

Kiến trúc hơi khác một chút so với những gì bạn đề cập, chỉ một tệp js cho tất cả các mẫu được gọi là "templates.js" hoặc bất kỳ thứ gì bạn muốn.

Bạn có thể kiểm tra xem nó ra ở đây, https://github.com/techpines/asset-rack#jadeasset

Trước tiên, bạn cài đặt nó trên máy chủ như sau:

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

Nếu bạn mẫu thư mục trông như thế này:

templates/ 
    navbar.jade 
    user.jade 
    footer.jade 

Sau đó, tất cả các mẫu của bạn được đưa vào trình duyệt dưới biến "Mẫu":

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

Dù sao, hy vọng điều đó sẽ hữu ích.

Answer 4

Bạn cũng có thể thanh toán thư viện mới của mình để tô ngọc bên trong trình duyệt. Nó đơn giản như < jade> ... </jade>. https://github.com/charlieamer/jade-query

Answer 5

Bạn sẽ không nhận được toàn bộ sức mạnh của Jade mẫu, nhưng bạn có thể hack nó một chút để có được ngọc đúng mẫu gạch đầu ra, chìa khóa đang ngăn ngọc thoát các <%> thẻ với các nhà điều hành !, như vậy:

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