2011-11-09 6 views
21

Tôi đang sử dụng handlebars.js hbs wrapper trong express.js. Tôi có mẫu làm việc tốt, nhưng tôi cần phải thêm vào partials để được kết xuất với quan điểm của tôi.mô-đun Express.js hbs - đăng ký partials từ tệp .hbs

Tôi muốn làm điều gì đó như thế này:

hbs.registerPartial('headPartial', 'header'); 
// where "header" is an .hbs file in my views folder 

Tuy nhiên, nó ném một "tiêu đề một phần không thể tìm thấy".

Tôi có thể thực hiện công việc registerPartial nếu tôi chuyển một chuỗi html tới tham số thứ hai, nhưng tôi muốn sử dụng các tệp xem riêng cho partials của tôi.

Tôi chưa tìm thấy bất kỳ tài liệu nào về vấn đề này, nhưng hy vọng tôi có thể thiếu điều gì đó dễ dàng.

Có ai biết cách sử dụng tệp xem trong phương pháp registerPartial không? Nếu vậy, làm thế nào để tôi thực hiện điều này?

CẬP NHẬT

Để cung cấp cho bối cảnh nhiều hơn, hãy để tôi thêm mã hơn. Dưới đây là "máy chủ" của tôi tập - app.js

var express = require('express') 
, routes = require('./routes') 
, hbs = require('hbs'); 

var app = module.exports = express.createServer(); 

// Configuration 

app.configure(function(){ 
    app.set('views', __dirname + '/views'); 
    app.set('view engine', 'hbs'); 
    app.use(express.bodyParser()); 
    app.use(express.methodOverride()); 
    app.use(app.router); 
    app.use(express.static(__dirname + '/public')); 
}); 

app.configure('development', function(){ 
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
}); 

app.configure('production', function(){ 
    app.use(express.errorHandler()); 
}); 

// this is the line that generates the error 
hbs.registerPartial('headPartial', 'header'); 

// What I'm expecting is for "headPartial" to be a compiled template partial 
// of the template within views/header.hbs, but it is not loading this way. 
// If I do something like hbs.registerPartial('headPartial', '<p>test</p>'); 
// then it does work. I need to know how to pass an .hbs file to the 
// registerPartial method. 

// Routes 
app.get('/', routes.index); 

app.listen(3000); 

Và đây là tập tin routes.index tôi:

exports.index = function(req, res){ 
    res.render('index', { title: 'Express' }) 
}; 

Trong thư mục quan điểm của tôi, tôi có ba mẫu:

views/ 
    header.hbs (this is my partial) 
    index.hbs 
    layout.hbs 

Trong tệp index.hbs của tôi, tôi đang gọi phần 'headPartial' với:

{{> headPartial}} 

Bất kỳ trợ giúp nào được đánh giá cao.

Trả lời

36

này code tải tất cả các mẫu phần trong một thư mục và làm cho họ có sẵn bằng cách filename:

var hbs = require('hbs'); 
var fs = require('fs'); 

var partialsDir = __dirname + '/../views/partials'; 

var filenames = fs.readdirSync(partialsDir); 

filenames.forEach(function (filename) { 
    var matches = /^([^.]+).hbs$/.exec(filename); 
    if (!matches) { 
    return; 
    } 
    var name = matches[1]; 
    var template = fs.readFileSync(partialsDir + '/' + filename, 'utf8'); 
    hbs.registerPartial(name, template); 
}); 
+1

Nice. Một cách nhanh chóng để có tất cả partials có sẵn khi cần thiết! – swatkins

+0

Cảm ơn Ben, điều này thực sự đã giúp rất nhiều. – Dave

11

Hình như tạo một biến và kéo trong mẫu mã theo cách thủ công:

var hbs = require('hbs') 
    , fs = require('fs') 
    , headerTemplate = fs.readFileSync(__dirname + '/views/_header.hbs', 'utf8'); 

và sau:

hbs.registerPartial('headPartial', headerTemplate); 
+0

Cảm ơn cho điều này, các công trình lớn – iancrowther

+0

này có vẻ như rất nhiều công việc phụ kiện partials trong express3 – chovy

35

Để thuận tiện, registerPart ials cung cấp một cách nhanh chóng để tải tất cả partials từ một thư mục cụ thể:

var hbs = require('hbs'); 
hbs.registerPartials(__dirname + '/views/partials'); 

Partials được tải từ một thư mục được đặt tên dựa trên tên tập tin của họ, nơi không gian và có dấu gạch nối được thay thế bằng một ký tự gạch dưới:

template.html  -> {{> template}} 
template 2.html -> {{> template_2}} 
login view.hbs  -> {{> login_view}} 
template-file.html -> {{> template_file}} 

Chúc mừng!

+0

Xin chào, nó có hoạt động với các thư mục con không? Trong trường hợp này, làm cách nào để chúng tôi có được lượt xem? Cảm ơn –

+0

Điều này thật tuyệt, nhưng lưu ý rằng nó tải partials không đồng bộ với một cuộc gọi lại - có thể bạn không muốn chấp nhận yêu cầu cho đến khi hoàn thành: [Helpers and Partials] (https://github.com/pillarjs/hbs # người trợ giúp và chia tay) –

1

Đối với tôi, tôi đã có tệp mẫu một phần.hbs

Sau đó, tôi đã cố gắng để truy cập chúng qua:

{{> my-partial }} 

Nhưng phần được lưu trữ trong hbs như my_partial không phụ thuộc vào tên tập tin.

này là nhờ vào hbs phiên bản 3.1.0 dòng 218

.slice(0, -(ext.length)).replace(/[ -]/g, '_').replace('\\', '/'); 

này nằm trong readme

0

Đối với tôi, tôi có một chức năng như:

var hbs = require('hbs'); 
var fs = require('fs');  
var statupfunc = { 
     registerHbsPartials : function(){ 
     //this is run when app start 
     hbs.registerPartials(__dirname + "/" + resource.src.views + '/partials');   
     }, 
     registerOneHbsPartials : function(event){ 
     //this is run for gulp watch 
     if(event.type == 'deleted') 
     { 
      return; 
     } 
     var filename = event.path; 
     var matches = /^.*\\(.+?)\.hbs$/.exec(filename); 
     if (!matches) { 
      return; 
     }  
     var name = matches[1];  
     var template = fs.readFileSync(filename, 'utf8');  
     hbs.registerPartial(name, template);  
     } 
    }; 

Run statupfunc .registerHbsPartials khi khởi động ứng dụng và sau đó đăng ký đồng hồ gulp với statupfunc.registerOneHbsPartials đăng ký partials trên tạo mới

gulp.task('watch', function() { 
    gulp.watch(resource.src.views + '/partials/*.*', statupfunc.registerOneHbsPartials); 
});