Question

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

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

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

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

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

Answer 1

这是一个快速的黑客攻击，但在大多数情况下都是可靠的

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的全局变量，并且每次调用添加点击处理程序时，变量都会递增，名称由＆＃34;地址＆＃34; + 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 template变量，例如<%- index %>，我在所有ID和名称中使用它们。然后我根据需要将其渲染出来：

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

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

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

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

3 个答案: