Delete Item from List using Knockout.js

http://stackoverflow.com/questions/8704559/delete-item-from-list-using-knockout-js

by rniemeyer

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script type="text/html" id="imgsList">
    <div style="float:left; margin: 10px 10px 10px 0;">
        <div>
            <a data-bind="text: Filename, attr: { href: Filename }"></a>
        </div>
        <div data-bind="click: $root.deleteImage">Delete</div>
    </div>
</script>

<div data-bind="template: { name: 'imgsList', foreach: model.Imgs }"></div>

JavaScript

var viewModel = {
    model: {
        Imgs: [
            { Filename: "one.jpg" },
            { Filename: "two.jpg" },
            { Filename: "three.jpg" } 
        ]
    },
    deleteImage: function(item) {
        alert(item.Filename + ' deleted.');
    }
};

ko.applyBindings(viewModel);