我目前正在创建一个网站，其中包含相当多的表单，其中包含的字段类型各不相同，我想知道其他人如何将表单“构造函数”代码的数量保持在最低限度并可重复使用。
这是我当前的一些代码的示例:
function editForm () {
function saveButton () {
return $('<tr/>')
.append(
$('<th/>')
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("new-button")
.addClass("submit-button")
.attr("type", "button")
.attr("value", "Save")
)
.append(" or ")
.append(
$('<a/>')
.attr("href", "#")
.text("Cancel")
)
);
};
this.section = function () {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "title")
.text("Title")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("title")
.addClass("text")
.attr("name", "title")
.attr("value", title)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
saveButton()
)
)
);
};
this.menuItem = function () {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "name")
.text("Item Name")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("name")
.addClass("text")
.attr("name", "name")
.attr("value", menu_item.name)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "price")
.text("Price")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("price")
.addClass("text")
.attr("name", "price")
.attr("value", menu_item.price)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "description")
.text("Description")
)
)
.append(
$('<td/>')
.append(
$('<textarea/>')
.addClass("description")
.addClass("text")
.attr("name", "description")
.attr("required", "false")
.attr("rows", "2")
.attr("cols", "50")
.text(menu_item.description)
)
)
)
.append(
saveButton()
)
)
);
};
return this;
};
以下是有关我目前正在做的事情以及我正在努力实现的目标的更多信息:
我网站上的表单是唯一使用表格布局布置的对象，因此我可以让表单标签与输入字段右对齐。根据我的理解，标签和字段之间的这个间距是让用户更容易理解表单的最佳方式。我乐于接受有关如何以其他方式实现相同效果的建议，尤其是在可能的情况下不使用表格。
我的 javascript 目前使用 JQuery 选择器逐个元素地构建这些表单以创建一个元素 $("<element/>")然后使用像 .append() 这样的 javascript 函数将它们链接在一起。
因为我正在构建表格布局的表单，这意味着在创建基本行结构时有很多重复的代码:
<tr>
<th>
<label for="fieldname">Field</label>
</th>
<td>
<input name="fieldname" type="text">
</td>
</tr>
由于这种方法，您可以在我上面的代码中看到很多重复，直觉上我认为我应该能够消除并可能制作一个我可以在整个站点范围内使用的表单构建器。
在我上面的代码中，我重复了许多元素，例如 , , , , 等。
我希望能够以更简洁的格式创建表单，如下所示:
menu_item = {
name: "",
price: "",
description: ""
}
createForm()
.addField(menu_item.name, "Nome", "text-input", required)
.addField(menu_item.price, "Preço", "text-input", required)
.addField(menu_item.description, "Descrição", "textarea")
.addField("Salvar item", "submit-button");
或者更好的是，像这样:
createForm()
.addField({
value: menu_item.name,
label_text: "Nome",
input_type: "text-input",
required: true })
.addField({
value: menu_item.price,
label_text: "Preço",
input_type: "text-input",
required: true })
.addField({
value: menu_item.description,
label_text: "Descrição",
input_type: "textarea" })
.addField({
value: "Salvar item",
input_type: "submit-button" });
其中 addField 函数具有一种格式，您可以在其中命名字段、定义向用户显示的标签(最初将是葡萄牙语，但我们希望将来支持多语言)以及输入元素和选项的类型对于该输入元素，例如 required="true"或 placeholder="i.e. Cereal、Waffles、Toast 等。"
任何人对他们如何解决此问题或任何生产就绪的 JQuery 插件(即当前维护的插件，而不仅仅是实验或废弃软件)有任何建议，我应该考虑帮助我解决此类问题？
最佳答案
我已经成功地使用了 trimpath[1]，一个 javascript 模板引擎。应该可以带你到那里。
[1] http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
编辑:一些附加信息:它得到维护，速度非常快，并且定义了最低限度，您可以用胶水包裹它。
另一个编辑:更多 javascript 模板库，看这里:
关于javascript - 关于使用 Javascript/Jquery 构建复杂表单的建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4279499/