MVC Knockout.js

Question

I am able to create a dynamic form with the help of this link

var viewModel = {
    users : ko.observableArray(),
    addUser : function () {
        this.users.push({
            name : ko.observable(),
            choicestring : ko.observable()
        });
    }
};

viewModel.addUser();

ko.applyBindings(viewModel);

my problem is I don't know how to remove the control I have added, how would I do that using the Knockout.js

Thanks and best regards

Answer 1

Knockout's observable arrays have a .remove(item) function that does this for you. So you could add this to your view model:

removeUser : function ( user ) {
    this.users.remove( user );
}

And then wire it up like this:

<ul data-bind="foreach: users">
    <li>
        <span data-bind="text: name"></span>
        (<a href="#" data-bind="click: function () { $parent.removeUser( $data ); }">Remove</a>)
    </li>
</ul>
<button data-bind="click: addUser">Add user</button>

Jsfiddle example: http://jsfiddle.net/8zR5u/

Answer 2

Usually it's something like that (valid for webapi so for MVC as well):

self.remove = function (product) {
        // First remove from the server, then from the view-model.
        $.ajax({ type: "DELETE", url: baseUri + '/' + product.Id })
            .done(function () { self.products.remove(product); });
    }