Question

我正在使用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>

这是否可以使用车把模板？或者我能做些类似的东西来得到我想要的结果？

谢谢！

Answer 1

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

为此，我使用帮助器通过JavaScript渲染表单，我们可以使用Handlebars支持的Hash Arguments功能来做任何我们喜欢的事情。

＆＃13;

  // 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();

＆＃13;

<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>

＆＃13;

在上面的代码段中，readonly="readonly"属性正被添加到＆＃34;视图＆＃34;下面的表单中。标题。

请注意，在我的浏览器中，这实际上并不会使表单变为只读 - 我不确定您是否有其他库或其他东西来处理它？</ p>

将表单属性传递给部分

1 个答案: