<h3>Products</h3>
<ul class="prods" data-bind="foreach: products">
<li>
<strong data-bind="text: name"></strong>
<button class="del">Delete</button>
</li>
</ul>
function appViewModel() {
this.products = ko.observableArray([
{ name: "XBox" },
{ name: "PlayStation" },
{ name: "Banana" },
{ name: "Wii" }
]);
this.removeProduct = function(product) {
this.products.remove(product);
}
};
var viewModel = new appViewModel();
ko.applyBindings(viewModel);
// Use jQuery to catch the events
$(".prods").on("click", ".del", function() {
viewModel.removeProduct(ko.dataFor(this));
});