Question

I’m using knockoutjs and the mapping plugin to generate view models from JSON returned from a server call. I get an array from the server, create a model which has the mapped array as a property, then data bind the array to a template to render all of the data on screen. Which works great.

I’d like to have a button rendered next to each item which would allow me to remove it, like in the example in this video (see about 14:20).

But in the video he binds to a function defined on the elements of the array. My elements are generated from the JSON using the mapping plugin, so I’m not sure how I add a function to each element, or if I even want to do that. Or can I make the click of the button bind to a function on the viewmodel and pass in the id of the element the button is associated with?

my javascript:

<script type="text/javascript">
    var supplierModel;

    $(function(){        
        getAllSuppliers();       
    })

    function getAllSuppliers(){
        $.getJSON('/SWM60Assignment/allsuppliers',function(responseData){
            supplierModel = new SupplierModel(responseData);
            ko.applyBindings(supplierModel);            
        });
    }
    var SupplierModel = function (supplierList) {
        var self = this;

        self.suppliers = ko.mapping.fromJS(supplierList);
        self.remove = function(supplierId){
            // how can I get the buttons to call this method with the id 
            // of the element they are the button for?
            alert('remove called with supplier id:'+supplierId);
        }
    };
</script>

and this is the template:

<script id="supplierTemplate" type="text/html">
    <li>
        Name: <span data-bind="text:name"></span> Address: <span data-bind="text:address"></span>
        <button data-bind="click:<what can I put here to bind correctly>>">Remove supplier</button>
    </li>
</script>

and the HTML for completeness:

<ul class="vertical" data-bind="template:{name:'supplierTemplate',foreach:suppliers}"></ul>

Answer 1

how about:

<button data-bind="click: $parent.remove">Remove supplier</button>

see Note 1 here

If you use ko.mapping it says that “Arrays are converted into observable arrays.” So, your suppliers property will have the ko array methods ( like remove ) on it.

You also might want to pass in the actual supplier to your remove function as well:

var SupplierModel = function (supplierList) {
    var self = this;

    self.suppliers = ko.mapping.fromJS(supplierList);
    self.remove = function(supplier){
        // observable array
        self.suppliers.remove( supplier ); 
    }
};