[英]Passing form attributes into partials
I am working on an app with NodeJS and have been able to use handlebars and partials without much trouble. 我正在使用NodeJS开发应用程序,并且能够轻松使用手把和部件。 I am getting to the point where I have view
and edit
forms for a car. 我现在可以view
和edit
汽车表格了。
For example, after the user submits an application I have "View" and "Edit" links that go to localhost:3000/cars/:id/view
and localhost:3000/cars/:id/edit
, respectively. 例如,在用户提交应用程序后,我具有分别指向localhost:3000/cars/:id/view
和localhost:3000/cars/:id/edit
“查看”和“编辑”链接。
The only difference between these two links is that the "View" page has the form with readonly="readonly"
and the "Edit" does not have the readonly
attribute. 这两个链接之间的唯一区别是,“查看”页面的格式为readonly="readonly"
,而“编辑”不具有readonly
属性。
What I would like to do 我想做什么
cars/view 汽车/图
{{ >car_form readonly=true }}
cars/edit 汽车/编辑
{{ >car_form readonly=false }}
<button type="submit">Submit</button>
Is this possible with handlebars templates? 车把模板有可能吗? Or is there something similar I can do to get the result I want? 还是有类似的事情我可以做以获得我想要的结果?
Thank you! 谢谢!
You're passing in the readonly
option correctly, now all you need to do is use it when rendering your form. 您正确地传递了readonly
选项,现在您所要做的就是在呈现表单时使用它。
To do that I've used a helper to render the form via JavaScript, where we can do anything we like using the Hash Arguments funtionality Handlebars supports. 为此,我使用了一个帮助器来通过JavaScript渲染表单,在这里我们可以使用哈希参数功能性把手支持的任何操作。
// 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>
In the above snippet, the readonly="readonly"
attribute is being added to the form beneath the "View" heading. 在以上代码段中,将readonly="readonly"
属性添加到“视图”标题下的表单中。
Note that on my browser, this does not actually make the form read-only - I'm not sure if you've got another library or something to handle that? 请注意,在我的浏览器上,这实际上并不使表单成为只读格式-我不确定您是否拥有另一个库或其他可以处理的库?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.