将表单属性传递给partials

我正在使用NodeJS的应用程序，并已能够使用句柄和partials没有太多的麻烦。 我正在开始view和edit汽车表格。

例如，用户提交一个应用程序后，我有分别转到localhost:3000/cars/:id/view和localhost:3000/cars/:id/edit “查看”和“编辑”链接。

这两个链接之间的唯一区别是“查看”页面的forms只有readonly="readonly" ，“编辑”没有readonly属性。

我想做什么

汽车/图

 {{ >car_form readonly=true }} 

汽车/编辑

 {{ >car_form readonly=false }} <button type="submit">Submit</button> 

这是可能的句柄模板？ 还是有什么类似的，我可以做得到我想要的结果？

谢谢！

Answer 1

您正在传递readonly选项，现在您只需在呈现表单时使用它。

为此，我使用了一个帮助器来通过JavaScript呈现表单，在那里我们可以使用Hash Arguments funtionality Handlebars支持的任何我们喜欢的东西。

  // Let's pretend this is the user input you're holding in Node.js // and want to render in your view and edit forms. var userInput = { "name": "Bob", "tagline": "Yep, I'm Bob!" }; Handlebars.registerHelper('userForm', function(options) { var formOpening = options.hash.readonly ? "<form readonly=\"readonly\">" : "<form>"; // Notice that I feed in `userInput` as the context here. // You may need to do this differently, depending on your setup. var formContents = options.fn(userInput); return formOpening + formContents + "</form>"; }); var userFormTemplate = Handlebars.compile(document.getElementById("userForm-template").innerHTML); var pageTemplate = Handlebars.compile(document.getElementById("page-template").innerHTML); Handlebars.registerPartial('userForm', userFormTemplate); document.getElementById("wrap").innerHTML = pageTemplate(); 

 <div id="wrap"></div> <script id="page-template" type="text/x-handlebars-template"> <h2>View</h2> {{> userForm readonly=true}} <h2>Edit</h2> {{> userForm readonly=false}} </script> <script id="userForm-template" type="text/x-handlebars-template"> {{#userForm readonly=readonly}} <input type="text" name="name" value="{{name}}" /> <input type="text" name="tagline" value="{{tagline}}" /> <button type="submit">Submit</button> {{/userForm}} </script> <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v4.0.5.js"></script>