0

基になるレコードを編集できるように、データを入力する必要があるフォームを含む ejs ビューがあります。データを含むオブジェクトをビューに渡しましたが、フォームに入力する方法が 2 つあります。どちらが優れているかを判断するための助けが必要です。

オプション 1 - 「サーバー側」の人口

次のように、フォームの値を要素に直接入れることができます。

<input type="text" id="txtFirstName" name="txtFirstName" value="<%= person.firstName%>" />
<input type="text" id="txtLastName" name="txtLastName" value="<%= person.lastName%>" />
...
etc

オプション 2 - 「クライアント側」の人口

または、オブジェクト全体をクライアントに返し、javascript を使用して次のようにフォーム フィールドにデータを入力することもできます。

<script>
   var data = "<%=JSON.stringify(person)%>".replace(/&quot;/gi, '"');
   var p = eval('(' + data + ')');
   populateForm(p);

   function populateForm (person) {
     $("#txtFirstName").val( person.firstName );
     $("#txtLastName").val( person.lastName );
     ....
     etc
  }
</script>

オプション 2 の利点は、新しいデータが ajax 経由で読み込まれた場合に、関数を簡単に再利用してフォームを再入力できることです。また、オプション 1 では何らかのタイプの html エンコーディングと引用符のエスケープが必要になるのに対し、すべてが js オブジェクト内にあるため、データをエスケープする必要がなくなります。一方、オプション 1 は js なしで機能します。

これを行うための標準的なベストプラクティスの方法はありますか (また、これらのオプションの 1 つですか)?

4

1 に答える 1

0

厳密には必要ない場合でも ajax を使用してデータをロードし、テンプレートのクライアント側をレンダリングします。そうすれば、モデルが JavaScript コントローラーにロードされ、テンプレート ビューに送り込まれます。

<script>
$(function (){
  var person = null;
  $.getJSON('/person',function (data) {
    person = data;
    var form = new EJS({url: '/form.ejs'}).render(person);
    $('#formContainer').append(form);
  });
});
</script>
于 2011-08-24T22:51:12.240 に答える