处理动态表单客户端的最佳方式？答案

【问题标题】：Best way to handle a dynamic form client-side?处理动态表单客户端的最佳方式？
【发布时间】：2014-03-28 07:22:59
【问题描述】：

我正在构建一个动态表单。它看起来像这样：

单击“添加目的地”时，我想添加另一个部分“地址 3”。如果之后点击“删除目的地”，“地址3”应重新编号为“地址2”。

我以前做过这样的事情，但总感觉 HTML 和 JavaScript 乱七八糟。我试图找出最好的方法。以下是一些可能的解决方案：

将每个部分包装在 <div> 中。单击“添加目的地”时，clone 最后一节。遍历克隆中的每个输入，更新 name 和 id 属性。将地址 # 包裹在 <span> 中并更新它。添加更多 JavaScript 来初始化日期和时间选择器和验证器。
使用 JavaScript/jQuery 构建整个 DOM。
将整个 HTML 块放入 JavaScript 字符串。对 ID、名称和数字使用占位符。根据需要使用一些基本的字符串替换来增加它们。
使用像Jade 这样的客户端模板语言，它只会在整个项目中的一两个地方使用。

没有一个解决方案特别吸引人。您将如何解决这个问题以及为什么？

【问题讨论】：

使用选择集合数组索引

标签： javascript jquery html

【解决方案1】：

这是一种快速破解方法，但在大多数情况下都很可靠

http://jsfiddle.net/techsin/7pceP/

var s = $('.sample'), c= $('.container'), total=1;

$('.Add>a').click(function(){addSample();});


function addSample() {
   var clone = s.first().clone();
   clone.find('.Remove').toggle().click(function(){ rmvSample($(this)); });
   clone.find('.num').text(++total);
   clone.insertBefore(c.children(":last-child"));
}

function rmvSample(x) {
    total--;
    x.parent().remove();
    updateIndex();  
}

function updateIndex(){
    $('.sample').each(function(i){
        $(this).find('.num').text(i+1);
    });
}

【讨论】：

这比我想象的要简单得多。需要解决一些问题，但这是一个非常好的开始。
我对你的理解印象深刻..因为我在理解代码方面很糟糕，即使是我写的。 :D
哈哈...我不得不挠头想了想，但我明白你在这里做什么 :-)

【解决方案2】：

如何：您可以初始化一个值为 1 的全局变量，并且每次调用 add click 处理程序时，变量都会递增，名称由“地址”+ globalCount 组成。同样，当单击删除目标时，全局计数会减少。

为什么：逻辑很少，虽然全局变量有时不是最好的，但它减少了其他解决方案可能产生的其他复杂性，并且非常优雅。

其他选项：创建第一个目标部分时，您可以为其提供数据属性$(destinationToCreate).data('count', 1).

我假设这些目的地部分将在某种容器中创建，并且它们具有相同的结构，因此当您创建一个新的部分时，可能会出现这样的情况：

var newCount = $('#destinationContainer div').last().data('count')++

【讨论】：

是的...全局计数器部分很简单。你会用哪种方法呢？带有字符串替换的一堆糟糕的 HTML？用 JS 手动构建 DOM？什么？
我明白你在问什么。在您建议的那些中，可能#3 仅使用变量而不是字符串替换。也许一个小助手功能可以简化问题。让我写下我的意思，我会在我的答案中发布。

【解决方案3】：

所以，我所做的是将整个 Twig 模板填充到 JavaScript 字符串中：

var template = {% filter json_encode|raw %}{% include 'bookings/address.twig' %}{% endfilter %};

模板中包含一些Underscore/lodash template 变量，例如<%- index %>，我在所有ID 和名称中都使用了这些变量。然后我根据需要渲染出来：

_.template(template,{'index':addressCounter++})

这样我可以充分利用 Twig 模板语言并在我的模板中使用它的表单构建器。我曾短暂考虑过使用 Nunjucks 代替 lodash，它基本上只是用于 JavaScript 的 Twig。但是，我认为在 Twig 中使用 Twig 可能会让人感到困惑，而且我不想包含完整的运行时，而我真正需要的是使用一些简单的变量替换。

到目前为止，似乎工作得很好。

【讨论】：