javascript - 将表单属性传递到局部

我正在使用NodeJS开发应用程序，并且能够轻松使用车把和部件。我要说的是我有汽车的view和edit表格。

例如，在用户提交应用程序后，我具有分别指向localhost:3000/cars/:id/view和localhost:3000/cars/:id/edit的“查看”和“编辑”链接。

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

我想做什么

汽车/视野

{{ >car_form readonly=true }}

汽车/编辑

{{ >car_form readonly=false }}

<button type="submit">Submit</button>

车把模板有可能吗？还是有类似的事情我可以做以获得我想要的结果？

谢谢！

最佳答案

您正确地传递了readonly选项，现在您需要做的就是在呈现表单时使用它。

为此，我使用了一个助手来通过JavaScript渲染表单，在这里我们可以使用Hash Arguments功能性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>

在上述代码段中，readonly="readonly"属性被添加到“视图”标题下的表单中。

请注意，在我的浏览器上，这实际上并不使表格为只读格式-我不确定您是否拥有另一个库或其他可以处理的库？

关于javascript - 将表单属性传递到局部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41864159/