Question

我正在尝试创建一个客户表单，用户可以在其中添加任意数量的地址字段。我需要保留它们的ID，以便可以从后端服务器访问它们。如何更改模板标记的子元素的ID值？

我已经制作了一个，但是它使用了内联字符串，根据我的线索很难维护，因此他建议我使用模板来完成，但是我不知道如何表现出与原始代码相同的方式。

var count = 2;
var i = 1;
$("#addAddress").on("click", function () {
    var addressLine = document.createElement("div");
    addressLine.id = "address-" + count;
    addressLine.innerHTML = `
                <p>Address ${count}</p>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress1">CustomerAddress1</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress1" name="CustomerAddresses[${i}].CustomerAddress1" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress1" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress2">CustomerAddress2</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress2" name="CustomerAddresses[${i}].CustomerAddress2" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress2" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress3">CustomerAddress3</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress3" name="CustomerAddresses[${i}].CustomerAddress3" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress3" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress4">CustomerAddress4</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress4" name="CustomerAddresses[${i}].CustomerAddress4" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress4" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerCountryCode">CustomerCountryCode</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerCountryCode" name="CustomerAddresses[${i}].CustomerCountryCode" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerCountryCode" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerPostNumber">CustomerPostNumber</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerPostNumber" name="CustomerAddresses[${i}].CustomerPostNumber" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerPostNumber" data-valmsg-replace="true"></span>
                    </div>
                </div>
          `

    $("#address-group").append(addressLine);
    i++;
    count++;

});

Answer 1

如果您不想使用现成的解决方案，则可以使用正则表达式来自制自己的模板系统。

// 1 take the contents of your template
addressLine.innerHTML = $('#adrtmpl').html()
    // 2. replace all ${count} strings with `count`
    .replace(/\$\{count\}/g, count)
    // 3. replace all ${i} strings with `i` 
    .replace(/\$\{i\}/g, i);

var count = 2;
var i = 1;
$("#addAddress").on("click", function() {
  var addressLine = document.createElement("div");
  addressLine.id = "address-" + count;
  addressLine.innerHTML = $('#adrtmpl').html().replace(/\$\{count\}/g, count).replace(/\$\{i\}/g, i);
  $("#address-group").append(addressLine);
  i++;
  count++;
});

#address-group {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="adrtmpl">

                <p>Address ${count}</p>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress1">CustomerAddress1</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress1" name="CustomerAddresses[${i}].CustomerAddress1" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress1" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress2">CustomerAddress2</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress2" name="CustomerAddresses[${i}].CustomerAddress2" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress2" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress3">CustomerAddress3</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress3" name="CustomerAddresses[${i}].CustomerAddress3" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress3" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress4">CustomerAddress4</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress4" name="CustomerAddresses[${i}].CustomerAddress4" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress4" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerCountryCode">CustomerCountryCode</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerCountryCode" name="CustomerAddresses[${i}].CustomerCountryCode" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerCountryCode" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerPostNumber">CustomerPostNumber</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerPostNumber" name="CustomerAddresses[${i}].CustomerPostNumber" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerPostNumber" data-valmsg-replace="true"></span>
                    </div>
                </div>
        


</template>

<button id="addAddress">add address</button>
<div id="address-group">
</div>

如何使用<templates>替换内联html字符串？

1 个答案: