从ko.observableArray中删除和修改项目

我已经放了一段我的MVC4代码here。我希望“减号”按钮删除它所属的行，然后遍历数组并将输入名称调整为顺序。我想我会需要它顺序来处理MVC4模型绑定。从ko.observableArray中删除和修改项目

我的问题是，我该如何识别哪个按钮刚刚被点击，以及它所属的数组中的哪个对象？请有任何想法吗？我是全新的淘汰赛，所以我甚至不确定这是否是最好的方式。

这是我的视图模型：

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>

来源

2013-10-20 codedog

如果你已经绑定的click处理程序的按钮，你可以做以下

this.removeRow = function (data) { 
    yourObservableArray.remove(data); 
    };

数据将被绑定到当前行的对象的引用

来源

2013-10-20 05:30:27 TGH

我认为如果在对象中定义了动作，它就会工作，但事实并非如此。 'removeRow'函数在'$ parent'中。请参阅jsFiddle片段。 – codedog

@DanyW即使你在'$ parent'上有'removeRow'，这个解决方案也应该可以工作，因为KO自动将“current”项传递给一个点击处理程序，作为第一个参数在这里看到：http://jsfiddle.net/fMAKB/ – nemesv

Ach ...确实有效。我复制了'n'封装的绑定代码，并忘记将'addRow'更改为'removeRow'。 – codedog

从ko.observableArray中删除和修改项目

回答

相关问题