当我提交表单时,foreach: integers 正在复制我的编辑器模板。有人知道为什么吗?
例如,假设我提交了 5 个整数,当我单击添加按钮时,将添加 5 个编辑器模板而不是 1 个。
剃刀:
<div data-bind="foreach: integers">
@Html.EditorFor(model => model.Integers)
</div>
<input name="btn" type="button" data-bind="click: addInteger" value="+" />
<input name="btn" type="button" data-bind="click: removeInteger, enable: integers().length > 2" value="-" />
编辑器模板:
@model IntegerSorter.Models.IntegerViewModel
<div class="input-group">
@Html.TextBoxFor(
m => m.IntegerValue,
new {
@class = "text-box single-line text-input large-input",
type = "number",
data_bind = "value: name,
uniqueName: true,
valueUpdate: 'afterkeydown',
attr:
{
id: 'Integers_' + $index() + '__IntegerValue',
name: 'Integers[' + $index() + '].IntegerValue'
}"
}
)
@Html.ValidationMessageFor(model => model.IntegerValue)
</div>
昏死:
var viewModel = {
integers: ko.observableArray([
{ name: ko.observable(), value: "0" }
]),
addInteger: function () {
this.integers.push({
name: ko.observable()
});
},
removeInteger: function () {
this.integers.pop({
name: ko.observable()
});
},
save: function () {
ko.utils.postJson($("form")[0], integers);
}
};
ko.applyBindings(viewModel);
编辑:
HTML:
<div data-bind="foreach: integers">
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[0].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[1].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[2].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[3].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[4].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
</div>
</div>