处理动态表单客户端的最佳方法？

Question

我正在建立一个动态表格。 看起来像这样：

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

我之前已经做过这样的事情，但是感觉总是像是一团糟的HTML和JavaScript。 我正在尝试找出最佳方法。 以下是一些可能的解决方案：

1. 将每个部分包装在<div> 。 单击“添加目标”时， 克隆最后一部分。 循环访问克隆中的每个输入，更新name和id属性。 将地址＃包裹在<span>并对其进行更新。 添加更多JavaScript来初始化日期和时间选择器以及验证器。

2. 使用JavasScript / jQuery构建整个DOM。

3. 将整个HTML块放入JavaScript字符串中。 将占位符用于ID，名称和数字。 使用一些基本的字符串替换来根据需要增加它们。

4. 使用像Jade这样的客户端模板语言，该语言只会在整个项目中的一两个地方使用。

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

Answer 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);
    });
}

Answer 2

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

原因：几乎没有逻辑，尽管全局变量有时并不是最大，但它降低了其他解决方案可能带来的其他复杂性，并且相当优雅。

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

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

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

Answer 3

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

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

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

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

这样，我可以充分利用Twig模板语言，并在模板中使用其表单生成器。 我曾短暂地考虑过使用Nunjucks代替lodash，而后者基本上只是JavaScript的Twig。 我认为在Twig内使用Twig可能会造成混淆，但是，当我真正需要的只是使用一些简单的变量替换时，我不想包含完整的运行时。

到目前为止看来工作还不错。