Nuxt CNode：Node.js专业中文社区

nodejs+express4.x+express-hbs开发时, express-hbs如何实现动态加载子模板(局部视图)?

发布于 9 年前作者 caihuattkl 4350 次预览最后一次回复是 9 年前来自问答

nodejs+express4.x+express-hbs开发时, express-hbs如何实现动态加载子模板(局部视图)?

我想实现的效果是根据不同页面使用不同的局部视图,当然是有条件判断的类似下面的逻辑.

当然上面的代码是错误的.我就是不知道语法,也不知道怎么能实现!希望知道的朋友不吝赐教.非常感谢了…急着写这个功能!

17 回复

没人知道吗?非常感谢了…急着写这个功能!

顶上去.让更多人看到啊!

可以给子模板指定layout ，　layout 里面写公共的视图, 局部视图用{{{body}}} 占位

caihuattkl

4楼•9 年前

@liujavamail 怎么操作.有实例吗? 不是太懂

liujavamail

5楼•9 年前

如果你的layout 文件夹下面，有一个hbs叫做index.hbs, 可以这么写

<body>
  <div >公共的视图</div>
 {{{body}}}
  </body>

在

app.get('/user', function(req,res) {
  res.render('user', layout: 'index')
})

指定layout 用哪个

在user.hbs中写的页面代码，就是你的局部视图，会渲染到那个{{{body}}}所占的地方，　最后访问/user这个url的时候，公共视图有了，局部视图也有了，

caihuattkl

6楼•9 年前

@liujavamail 局部视图{{>head}}类似这样就可以引入啊…我现在就是想动态的更换这个局部视图…根据用户访问的页面的不同(实际上这些页面是用的一个模板),而这个模板里面我引入了{{>head}}这个局部视图,当用户传参数不同,比如u=1时,用{{>head}},u=2时{{>head_2}},u=3时{{>head_3}}……

页面对应的模板一直没变，就是局部视图哪里改变了！

liujavamail

7楼•9 年前

http://www.jianshu.com/p/a38ec7ef339a

嗯,我大概已经明白你的意思了!!

app.engine(‘hbs’, exphbs.express4({ partialsDir: ‘./views/template/partials/’, //模版文件的绝对路径 layoutsDir: “./views/template/layouts/”, defaultLayout:’./views/template/layouts/layout-default’, extname: ‘.hbs’, helpers: { section: function(name, options) { if(!this._sections) this._sections = {}; this._sections[name] = options.fn(this); console.log(name,options) return null; } }

}));

caihuattkl

10楼•9 年前

@liujavamail 我使用的是express-hbs,跟express-Handlebars功能是一样的吧?,我helpers是按照你给的地址设置的.为什么提示500错误.我可能是哪里配置错误了…能看下我的代码吗?

@liujavamail 能介绍下吗?

https://github.com/barc/express-hbs

你用的是这个吗?

hbs.registerHelper('link', function(text, options) {
  var attrs = [];
  for(var prop in options.hash) {
    attrs.push(prop + '="' + options.hash[prop] + '"');
  }
  return new hbs.SafeString(
    "<a " + attrs.join(" ") + ">" + text + "</a>"
  );
});

# in markup
{{{link 'barc.com' href='http://barc.com'}}}

好像是要registerHelper

caihuattkl

13楼•9 年前

@liujavamail 是的.我是使用的这个!

caihuattkl

14楼•9 年前

@liujavamail 这个写法,所有页面都会出现链接.跟express-Handlebars的段落功能还不一样?

liujavamail

15楼•9 年前

试一试，如果你自己定义一个标签，是否还会有用，类似于angular.js的directive hbs.registerHelper(‘mydiv’, function() {})

{{{mydiv }}}

caihuattkl