模板把手中的模板

Question

I am developing a NodeJs app, with express and handlebars. 我正在开发带有Express和把手的NodeJs应用程序。 What I want is that I can reuse some partials like the header and footer elements. 我想要的是可以重用一些局部元素，例如header和footer元素。

So I thought, I pick the 'base' html. 所以我想，我选择了“基本” html。 And shoot the required html elements in it via Handlebars. 并通过车把拍摄所需的html元素。

I have this at my index.js: 我在index.js上有这个：

const functions = require('firebase-functions');
const express = require('express');
const engines = require('consolidate');

const app = express();
app.engine('hbs', engines.handlebars);
app.set('views', './views');
app.set('view engine', 'hbs');

app.get('/activiteiten', (request, response) => {

    // var test = require('./views/dayCard.hbs');
    // var data = {display_name: "hi"};
    // var theCompiledHtml = test(data);

    response.render('index', {
        menu_item: "Mijn Dashboard",
        menu_sub: "Activiteiten"
        //content: theCompiledHtml

    });
});


exports.app = functions.https.onRequest(app);

This works like expected. 这像预期的那样工作。 But I want to append some more data to it. 但是我想在上面附加一些数据。 So I have created the content tag in the template. 因此，我已经在模板中创建了内容标签。 Besides that, I have added the html to the dayCard.hbs. 除此之外，我将html添加到dayCard.hbs中。

Daycard.hbs: Daycard.hbs：

<div class="col-xs-12 col-md-6 col-lg-3">
    <div class="card-deck text-center">
        <div class="card box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{display_name}}</h4>
            </div>

            <div class="card-body">
            </div>
        </div>
    </div>
</div>

I want to use that file, append some data to it. 我想使用该文件，向其中添加一些数据。 And append that total package to the content tag. 并将整个包附加到content标签。 So a sort of template into a template. 于是把一种样板变成了样板。 How can I do that? 我怎样才能做到这一点？

Answer 1

If you are going to have more than one partial you should probably set up a structure like so 如果要使用多个部分，则可能应该建立一个像这样的结构

- views
  - layouts
      layout.hbs //your html boilerplate layout
  - partials
      header.hbs
      footer.hbs
  index.hbs

In index.js set your view engine with default layout. 在index.js将视图引擎设置为默认布局。

    // View Engine
    app.set('views', path.join(__dirname, 'views'));
    app.engine('handlebars', expressHandlebars({ defaultLayout: 'layout' }));
    app.set('view engine', 'handlebars');

Then in your layout.hbs file you can use the partial syntax eg for Daycard.hbs {{> Daycard}} 然后，在您的layout.hbs文件中，可以使用部分语法，例如对于Daycard.hbs {{> Daycard}}

   <!DOCTYPE html>
     <html>
     <head></head>
       <body>
         {{> navbar}}
         {{{body}}}  //which will render the contents of index.hbs
         {{> footer}}
       </body>
    </html>

模板把手中的模板

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-02-11 19:14:38

模板把手中的模板

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-02-11 19:14:38

解决方案1
3 已采纳 2018-02-11 19:14:38