Metalsmith html template view model binding

Question

I want to create static html pages and bind the content to a javascript object, I know there is a plugin called MetalSmith-layout which binds the value from markdown file to the html, but for my case, the binding values are dynamic, so I cannot prepare a static markdown, or I have to create the markdown file on the fire.

So for my question, is there any better way to bind the template and javascript object just like Express router does? such as

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('homepage', vm);
});

homepage.swig

<html>
...
    <div>{{ firstName }}</div>
    <div>{{ lastName }}</div>
...
</html>

vm.json

{
   "firstName":"Tom",
   "lastName":"Hansk"
}

score 0 · Accepted Answer · answered Aug 20 '17 at 09:21

I have just found out that I can add my view model inside metadata, and every layout pages can access this global object.

var viewModel = 
{                   
    firstName: "Tom",
    lastName: "Hanks"
};

Metalsmith(__dirname)         // __dirname defined by node.js:
                          // name of current working directory
  .metadata(viewModel)   // add any variable you want
                          // use them in layout-files
   ...
   .use(layouts({              // wrap layouts around html
     engine: 'handlebars',     // use the layout engine you like
   }))
   ...

template.html

<html>
...
  <div>{{ firstName }}</div>
  <div>{{ lastName }}</div>
...
</html>

source: https://github.com/segmentio/metalsmith/blob/master/examples/static-site/index.js

Metalsmith html template view model binding

1 Answers1