Node.js + Express + Handlebars.js + kısmi görünümler

Question

Bir şablon şablonu motoru olarak Handlebars.js kullanarak Node.js | Express ile basit bir HelloWorld projesi yapmaya çalışıyorum.

sorun özellikle birden fazla görüntüsü, bu zincir kullanılarak herhangi bir örnekleri bulamadık olmasıdır.

<header> 
    <span>Hello: {{username}}</span> 
</header> 

Ve diğer manzaraya sahip her sayfada kullanmak:

Mesela ben başlık görünümünü tanımlamak istiyorum.

Belki bu görünümleri yanlış bir şekilde düşünüyorum, bu görünümün başka bir görünümün içinde herhangi bir sayfada yeniden kullanabileceğim bir kontrol olduğunu düşündüm.

Eğitebileceğim ya da (çok daha iyi) açık kaynak kodlu bir projeye link verebileceğim herhangi bir bağlantı için minnettarım.

Answer 1

Şu anda "-express gidon" ve mükemmel olarak görüyorum ait ericf uygulanması konusunda kullanıyorum: dahilinde aksine

https://github.com/ericf/express3-handlebars

hatırlamak önemli şey olduğunu, express üzerinde tarayıcı, görünüm işlemleri aşamasında gidonlar aktif hale gelir. İstemci kodu, PHP bağlamında bıyık kullanmış gibi sadece düz HTML olacak.

Answer 2

Kısmi kullanmanız gerekir. Kısmi kullanmanın güzel bir örneği için https://github.com/donpark/hbs/tree/master/examples/partial numaralı telefona bakın. |

İşte https://www.npmjs.org/package/hbs Kullanılması başka bir örnek http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

Answer 3

var https://github.com/donpark/hbs

Diyelim ki olduğunu varsayalım:

+ views 
    - index.hbs 
    + partials 
    - footer.hbs 

Sen partials hangi klasörde kaydetmek gerekir:

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

Partials dosya olduğunu tam adını olacaktır. Ayrıca kullanarak partials için özel adlar kayıt olabilirsiniz:

hbs.registerPartial('myFooter', fs.readFileSync(__dirname + '/views/partials/footer.hbs', 'utf8')); 

Sonra böyle erişmek:

burada

için tam bir örnek: https://github.com/donpark/hbs/tree/master/examples/partial

Answer 4

bunu uzun istendiğini biliyorum zaman önce, ama bu yazıya hiç kimse cevap vermedi. Ben de burada yapacağım. Herkesin aynı sayfada olmasını sağlamak için cevabımda çok ayrıntılı olacağım. Aşırı derecede basit görünüyorsa önceden özür dilerim.

Sunucu.js dosyanızda (veya görünüm motorunuz olarak gidonları tanımladığınız her yerde), app.js aracında. Nbs paketiniz olarak kullandığınız şeye, hbs veya express-handlebars vb. Gibi bağlı olarak farklı görünebilir, ancak buna benzer. Not: Bu örnekte express-handlebar kullanıyorum.

dosyası: sunucu.

| /views/ 
|--- /layouts/ 
|----- main.hbs 
|--- /partials/ 
|----- header.hbs 
|----- footer.hbs 
|----- ... etc. 
|--- index.hbs 
| server.js 

Ve main.hbs dosya aşağıdaki gibi görünmelidir: js

... 
var express  = require('express'), 
    hbs   = require('express-handlebars'), 
    app   = express(); 
... 

app.engine('hbs', hbs({ 
    extname: 'hbs', 
    defaultLayout: 'main', 
    layoutsDir: __dirname + '/views/layouts/', 
    partialsDir: __dirname + '/views/partials/' 
})); 

app.set('view engine', 'hbs'); 

... 

ve dosya yapısı bu gibi görünmelidir

dosyası: main.hbs

... 
{{> header }} 
... 
<span> various other stuff </span> 
... 
{{> footer }} 

Bir kısmi belirtmek için Bu sözdizimini kullanın: {{> partialsNames }}.