從observableArray刪除 - knockoutjs

我相信這對於某人來說是一個簡單的答案。我有以下視圖模型：從observableArray刪除 - knockoutjs

@{ 
    var initialData = new JavaScriptSerializer().Serialize(Model); 
} 
var data = @Html.Raw(initialData); 
function ViewModel(data) { 
    var self = this; 
    self.Name = ko.observable(data.Name); 
    self.Items = ko.observableArray(data.Items); 
    self.addItem = function() { self.Items.push(""); }; 
    self.removeItem = function(data) { self.Items.remove(data); } 
} 
$(document).ready(function() {ko.applyBindings(new ViewModel(data)); });

而以下幾種觀點：

<div> 
    Name: <span data-bind="text: Name"></span> 
</div> 
<div> 
    Items: <button data-bind="click: addItem">Add Item</button> 
</div> 
<div> 
    <table> 
     <tbody data-bind="template: { name: 'itemTemplate', foreach: Items }"></tbody> 
    </table> 
</div> 
<script type="text/html" id="itemTemplate"> 
    <tr> 
     <td> 
      <input data-bind="value: $data" /> 
      <a href="#" data-bind="click: function() {$parent.removeItem($data)}">Remove Item</a> 
     </td> 
    </tr> 
</script>

一切似乎除了removeItem正常工作。添加新行後，在空的新行上單擊「刪除項目」時，所有新行都將隨之刪除。我已經看過大量的淘汰賽教程，試圖讓這個工作，我的方法似乎是一個有效的嘗試，但顯然......我一定是失去了一些東西。有什麼建議麼？

來源

2012-08-30 Mr Jones

一個observableArray的remove函數循環遍歷數組，並刪除與傳遞給它的值相匹配的任何項。在你的情況下，你只是處理字符串，它會看到所有新的（沒有值）將匹配「」。

有幾個方法來處理它：

就可以對付的對象，而不是就像{ value: ko.observable("") }字符串。然後，當您通過$data時，它只會刪除與該對象引用相匹配的實際項目。如果你的值是不可觀察的，並且是數據本身（不是屬性），那麼你的寫入不會實際返回到你的視圖模型。
如果這對您的方案無效，那麼您可以使用拼接根據索引（$index）刪除項目。

我可能會不喜歡它：http://jsfiddle.net/rniemeyer/N3JaW/

還要注意的是，event（click是一個包裝event）結合將通過目前的數據作爲第一個參數的處理程序，讓您可以簡化您與click: $parent.removeItem的綁定。

更新：這裏有幾種方法，你可以控制你的對象是如何轉換成JSON：

ko.toJSON傳遞的第2和第3的參數上JSON.stringify。第二個參數讓我們運行一個函數來潛在地替換here中描述的值。這裏是一個樣本，檢查密鑰是否是一個數字（數組項），它有一個value屬性。如果是這樣，它只是返回字符串而不是對象。 http://jsfiddle.net/rniemeyer/N3JaW/1/
如果您爲對象使用構造函數，那麼您可以覆蓋toJSON函數，如here所述。以下是您的具有此功能的示例：http://jsfiddle.net/rniemeyer/N3JaW/2/
可以使用的另一種技術是維護具有「良好」值的計算可觀察值。這裏是樣品：http://jsfiddle.net/rniemeyer/N3JaW/3/。在這一個Items是一個計算的observable，返回乾淨的值。 Items.asObjects包含您的值的對象版本。當轉換爲JSON時，當Items轉換爲JSON時，asObjects部分自然會丟失。如果你在轉換爲JSON時只需要這個「好」的數組，那麼其他選項對性能更好（它們只在你想發送時計算）。

來源

2012-08-30 16:26:43

我真的很喜歡你在jsfiddle上的方法，但我沒有提到我需要將這個模型發回服務器。這意味着'Items'需要是一個字符串[]。所以我猜這意味着我應該去$ index路線，對嗎？ –

不一定。有幾種方法可以確保JSON輸出恢復到您想要的狀態。我會回答一些信息。 –

如果可以的話，我會給你兩個ups。非常有用的答案。 –

從observableArray刪除 - knockoutjs

回答

相關問題