Я поставил на фрагмент моего MVC4 кода здесь. Я хотел бы, чтобы кнопка "минус" удаляла строку, к которой она принадлежит, затем проходит через массив и корректирует имена входных данных как последовательные. Я думаю, мне понадобится, чтобы он был последовательным для работы с привязкой модели MVC4.
Моя проблема заключается в том, как определить, какая кнопка была нажата, и какой объект в массиве принадлежит? Любые идеи, пожалуйста? Я совершенно новичок в нокауте, поэтому я даже не уверен, что это лучший способ сделать это.
Это моя модель взгляда:
function ViewModel() {
this.breeders = ko.observableArray([{
keyName: ko.observable("Breeders[0].Key"),
valueName: ko.observable("Breeders[0].Value"),
canAdd: ko.observable(true),
canRemove: ko.observable(true)
}]);
this.addRow = function () {
var next = this.breeders().length;
this.breeders.push({
keyName: ko.observable("Breeders[" + next.toString() + "].Key"),
valueName: ko.observable("Breeders[" + next.toString() + "].Value"),
canAdd: ko.observable(true),
canRemove: ko.observable(true)
});
};
this.removeRow = function () {
};
}
И это моя разметка:
<div class="form-group">
<div id="breedersFormsContainer" data-bind="template: {name: 'breederForm', foreach: breeders}"></div>
</div>
<script type="text/html" id="breederForm">
<div class="col-lg-offset-3">
<span class="col-lg-1 control-label">Reg: </span><span class="col-lg-2"><input data-bind="attr: {name: keyName}" type="text" class="form-control" /></span>
<span class="col-lg-1 control-label">Name: </span><span class="col-lg-6"><input data-bind="attr: {name: valueName}" type="text" class="form-control" /></span>
<button type="button" class="btn btn-default" data-bind="enable: canRemove"><span class="glyphicon glyphicon-minus">-</span></button>
<button type="button" class="btn btn-default" data-bind="enable: canAdd, click: $parent.addRow.bind($parent)"><span class="glyphicon glyphicon-plus">+</span></button>
</div>
</script>
Если вы привязали обработчик кликов к кнопке, вы можете сделать следующее
this.removeRow = function (data) {
yourObservableArray.remove(data);
};
данные будут ссылкой на объект, связанный с текущей строкой
removeRow
находится в$parent
. Пожалуйста, обратитесь к фрагменту jsFiddle.removeRow
в$parent
потому что KO автоматически передает «текущий» элемент в обработчик щелчка, как первый параметр, который можно увидеть здесь в действии: jsfiddle.net/fMAKB