首页 > 解决方案 > 使用 handlebars.js 创建条件渲染

问题描述

我正在使用 Handlebars.js 和 Express.js 构建一个简单的调查网络应用程序

我有一个带有欢迎消息和 HTML 按钮的面板

用户单击按钮时是否可以更改传递的布尔值?

目的是在我单击开始按钮时呈现一个新模板

自定义助手在这种情况下不起作用

如果我想渲染 react.js 组件之类的模板怎么办?

home.hbs(主体元素):

{{#if test}}
  <div class="myContainer d-flex justify-content-center align-items-center">
      <div class="container bg-success col-6 text-center">
          <h2>welcome</h2>
          <p>click on start button</p>
          <button onclick="{{changeFoo test}}" class="btn btn-primary">start</button>
          <h2>{{price}}</h2>
      </div>
  </div>
{{else}}
  <h1>questions</h1>
{{/if}}

我的自定义助手(changeFoo):

hbs.registerHelper('changeFoo', function(foo) { 
foo = !foo;
console.log(foo)
return foo
});

我的路由器:

return res.render('home', {
            test: true,
            price: 2
        })

标签: javascriptnode.jsexpresshandlebars.js

解决方案


推荐阅读