Passing an array as an option to a Knockout custom binding

Question

So I'm sure I'm not the first person who's ever tried to do this, but I can't find any examples that match what I'm trying to do so here I am.

I have a Knockout custom binding that is defined as such.

 ko.bindingHandlers.table = {
    init: function (element, valueAccessor) {
        value = ko.unwrap(valueAccessor());
        //Create a table
};

The goal is to minimize what a user who wants to create a table has to know about javascript. The HTML that I'd like them to supply is something like:

data-bind="table: foo, columns: ['id', 'first name', 'last name', ect...]"></table> 

I want to be able to specify the columns in an array-like format (again, trying not to use any JS). I'm aware that I could do something dumb like col1: 'id', col2: 'first name' but I'd rather have an object / array that I can easily just do a .length() of when I go to make my table.

I do have a work-around working with data- using Jquery, but I'd rather do something like this if I can.

Last but not lease, I'm assuming that I'd gain access to the object through the allBindings accessor, if I'm mistaken by that please let me know. Thank you in advance.

Answer 1

You're probably better off using one of the existing table bindingHandlers out there. Either Knockout Contrib's KO Grid, @MichaelBest's suggested table above or any other which is already out there.

Regarding your question; binding an array is just as simple as you thought it would be, just enter the array in the binding (or bind to a property which holds an array). However, you're really asking about using a bindingHandler to read settings from multiple bindings. To do that, use the third parameter of the init/update function of your bindingHandler, the allBindings parameter.

A simple example of such a binding could be:

ko.bindingHandlers['table'] = {
    init: function(element, valueAccessor, allBindings){
        var data = ko.unwrap(valueAccessor());
        var columns = allBindings.get('columns');
        var table = document.createElement('table');
        for(var i = 0; i < data.length; i++){
            var currentItem = data[i];
            var row = document.createElement('tr');
            for(var j = 0; j < columns.length; j++){
                var column = document.createElement('td');
                column.innerText = currentItem[columns[j]];
                row.appendChild(column);
            }
            table.appendChild(row);
        }
        element.appendChild(table);
    }
};

You would then use that bindingHandler like:

<div data-bind="table:data, columns: ['id','firstName']"></div>

I have a working sample using the above binding at http://jsfiddle.net/TK9y2/

Do be aware that the allBindings parameter also provides a has method, which you should use to check if there is a binding with the name you are looking for. You can read up regarding this in the Knockout documentation on custom bindings.