部分属性にフォーム属性を渡す

Question

私はNodeJSでアプリを開発しており、ハンドルバーやパーシャルをあまり問題なく使用することができました。私は車のためのviewとeditフォームを持っているポイントになっています。

たとえば、ユーザーがアプリケーションを送信した後、私はlocalhost:3000/cars/:id/viewとlocalhost:3000/cars/:id/editにそれぞれ移動する「表示」リンクと「編集」リンクを持っています。

これらの2つのリンクの唯一の違いは、「表示」ページが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>

、readonly="readonly"属性が「ビュー」の見出しの下のフォームに追加されています。

私のブラウザでは、これは実際にフォームを読み取り専用にしません。別のライブラリやそのようなものを持っているかどうかはわかりません。