從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中刪除和修改項目

回答

相關問題