Question

我有一个ejs视图，其中包含我需要填充数据的表单，以便可以编辑基础记录。我已经将包含数据的对象传递给视图，现在看到两种填充表单的方法，并希望有一些帮助来决定哪一个更好。

选项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加载新数据，则可以轻松地重用该函数来重新填充表单。它还消除了转义数据的任何需要，因为它全部存在于js对象中，而选项1则需要某种类型的html编码和引号转义。另一方面，选项1不使用js。

是否有标准的最佳实践方法（并且这是其中一种选择）？

Answer 1

即使在不严格需要的情况下，我也会使用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>

填写表单的最佳做法？

选项1 - “服务器端”人口

选项2 - “客户端”人口

1 个答案: