Question

I’m sure this will be an easy answer for somebody. I have the following ViewModel:

@{
    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)); });

And the following View:

<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>

Everything seems to work correctly except for removeItem. When new rows have been added, and “Remove Item” is clicked on an empty new row, all of the new rows will be removed with it. I’ve looked at tons of knockout tutorials trying to get this to work, and my method seems to be a valid attempt, but obviously… I must be missing something. Any suggestions?

Answer 1

The remove function of an observableArray loops through the array and deletes any items that match the value passed to it. In your case, you are just dealing with strings and it will see that all of the new ones (with no value) will match “”.

There are a couple ways to handle it:

• you can deal with objects instead of just strings like { value: ko.observable("") }. Then, when you pass $data it will only delete the actual item that matches that object reference. If your value is not observable and is the data itself (not a property), then your writes won’t actually make it back to your view model.

• if that does not work for your scenario, then you could delete items based on the index ($index) using splice.

I would probably do it like: http://jsfiddle.net/rniemeyer/N3JaW/

Also note that the event (click is a wrapper to event) binding will pass the current data as the first argument to the handler, so you can simplify your binding to click: $parent.removeItem.

Update: here are several ways that you can control how your object is converted to JSON:

• ko.toJSON passes its 2nd and 3rd arguments on to JSON.stringify. The second arg let’s you run a function to potentially replace values as described here. Here is a sample that checks to see if the key is a number (array item) and it has a value property. If so, it just returns the string rather than the object. http://jsfiddle.net/rniemeyer/N3JaW/1/

• If you use a constructor function for your objects, then you can override the toJSON function as described here. Here is your sample with this functionality: http://jsfiddle.net/rniemeyer/N3JaW/2/

• Another technique that can be used is to maintain a computed observable that has the “good” value. Here is sample: http://jsfiddle.net/rniemeyer/N3JaW/3/. In this one Items is a computed observable that returns the clean value. Items.asObjects contains the object version of your values. When converted to JSON, the asObjects part is naturally dropped when Items is converted to JSON. If you only need this “good” array when converting to JSON, then the other options are better for performance (they only are calculated when you want to send it).