首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Metalsmith html模板视图模型绑定

Metalsmith html模板视图模型绑定
EN

Stack Overflow用户
提问于 2017-08-19 23:40:36
回答 1查看 88关注 0票数 0

我想创建静态html页面并将内容绑定到javascript对象,我知道有一个名为MetalSmith-layout的插件,它将markdown文件中的值绑定到html,但对于我来说,绑定值是动态的,所以我无法准备静态markdown,否则我必须创建markdown文件。

那么对于我的问题,有没有更好的方法来像Express路由器那样绑定模板和javascript对象呢?比如

代码语言:javascript
复制
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('homepage', vm);
});

homepage.swig

代码语言:javascript
复制
<html>
...
    <div>{{ firstName }}</div>
    <div>{{ lastName }}</div>
...
</html>

vm.json

代码语言:javascript
复制
{
   "firstName":"Tom",
   "lastName":"Hansk"
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-20 17:21:27

我刚刚发现我可以在元数据中添加我的视图模型,并且每个布局页面都可以访问这个全局对象。

代码语言:javascript
复制
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

代码语言:javascript
复制
<html>
...
  <div>{{ firstName }}</div>
  <div>{{ lastName }}</div>
...
</html>  

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45773394

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档