jeudi 17 mars 2016

Knockout custom binding for Table with both a column of checkbox

Not sure if I'm the first person ever trying to do this, but I can't find any tutorials/examples so here I am.

What I'm doing is to bind some data member of a view model to a table, and specifically, this table has a column of checkboxes, taking user's input as its 'checked' value.

This is not hard to do in html:

`<table>
    <!-- omit the headers definition here-->
    <tbody data-bind="foreach: pagedrows">
            <tr>
                <td data-bind="html:templates[templateid]"></td>
                <td data-bind="html:subscriptions[subscription]"></td>
                <td data-bind="html:datecreated"></td>
                <td>
                    <input type="checkbox" data-bind="checked: selectedobservable">
                </td>
            </tr>
        </tbody>
   </table>`

But now I need to implement those bindings in Knockout custom binding handler, defined in typescript like below:

`class TableBindingHandler implements KnockoutBindingHandler {    
init(element, valueAccessor: () => any, allBindingsAccessor: KnockoutAllBindingsAccessor, viewModel, bindingContext: KnockoutBindingContext) 
{
    //do some initialization here            
}
update(element, valueAccessor: () => any, allBindingsAccessor: KnockoutAllBindingsAccessor, viewModel, bindingContext: KnockoutBindingContext) {
    //do some updates here                
}
}`

And with that, the html part is simplified as:

`< ... data-bind="table: pagedRows" >`

Not sure what is the proper way to do this in the bindinghandler, i.e. bind the data members in viewmodel to each column of the table, and specifically specify one of the columns is checkbox not plain text? Thanks so much in advance if any one can give me any hint!




Aucun commentaire:

Enregistrer un commentaire