Làm thế nào để biên dịch các mẫu ngọc bích thành các hàm JavaScript để sử dụng chúng ở phía máy khách?

Question

Tôi muốn sử dụng các mẫu ngọc bích được biên dịch trên phía máy khách. Làm thế nào tôi nên biên dịch chúng để có được các tập tin javascript? https://github.com/visionmedia/jade

Answer 1

Tìm các giải pháp được đề xuất trong jade issue 149 discussion. Thật không may, không có sẵn sàng để sử dụng tùy chọn, như tôi biết.

Answer 2

Blade là một công cụ mẫu HTML giống như Jade có phần mềm trung gian được tích hợp sẵn để phục vụ các mẫu đã biên dịch cho ứng dụng khách. :) Kiểm tra nó ra!

Answer 3

Có bạn có thể! https://github.com/techpines/asset-rack#jadeasset

Tôi chỉ cần mở "giá trị tài sản", một dự án nodejs có thể biên dịch trước các mẫu ngọc bích và phục vụ chúng trong trình duyệt dưới dạng hàm javascript.

Đ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.

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 trở thành trình duyệt dưới sự biến "Mẫu ":

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

Answer 4

#coffeescript 
jade = require 'jade' 
data = '#menu' 
options = 
    client: true 
    compileDebug: false 
fn = jade.compile data, options 
console.log fn.toString() 

Answer 5

Bạn có lẽ nên xem xét tích hợp điều này vào một nhiệm vụ xây dựng Grunt.

Xem grunt-contrib-jade

Answer 6

Câu hỏi này được một chút ngày, nhưng có một phương pháp biên soạn mẫu Jade,

var jade = require('jade'); 
var fn = jade.compile(jadeTemplate); 
var htmlOutput = fn({ 
    maintainer: { 
    name: 'Forbes Lindesay', 
    twitter: '@ForbesLindesay', 
    blog: 'forbeslindesay.co.uk' 
    } 
}) 

Chỉ cần có để the tutorial và tìm kiếm biên dịch, hoặc the API dưới

jade.compile(source, options) 

Đảm bảo đặt, biên dịchDebug để bạn lấy nguồn,

Đặt điều này thành sai để tắt công cụ gỡ lỗi (được khuyến nghị trong sản xuất). Đặt nó thành true để bao gồm nguồn chức năng trong mẫu đã biên dịch để có thông báo lỗi tốt hơn (đôi khi hữu ích khi phát triển).