将表单属性传递到分支

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

这可能与车把模板？还是有类似的东西我可以做得到我想要的结果？

谢谢！

来源

2017-01-26 szier

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

为此，我使用助手来通过JavaScript呈现表单，我们可以使用Handlebars支持的功能Hash Arguments来做任何事情。

// 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"属性被添加到形式的“查看”标题下。

请注意，在我的浏览器中，这实际上并不使表单成为只读 - 我不确定是否有另一个库或其他东西来处理它？

来源

2017-01-26 01:34:48

将表单属性传递到分支

回答

相关问题