编辑器模板重复 - applyBindings?

时间:2013-10-26 13:39:37

标签: asp.net-mvc knockout.js mvc-editor-templates

当我提交表单时,foreach:整数正在复制我的编辑器模板。有人知道为什么吗?

e.g。假设我提交了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>

0 个答案:

没有答案