Knockoutjs complex binding combo select table

Question

I have a table for adding a new budget details like the image below:

enter image description here

When I select an Income Account then another row is added to the viewmodel collection:

enter image description here

I want to set all field values to "0.00" when the new row is added and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.

Any clue? Here is the fiddle working sample: http://jsfiddle.net/rLUyS/9/

Here is the code that I use to bind the change action to the last added combo:

$('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
    combo: $(this)
}, handler);

function handler(event) {

    newRowIndex++;
    var combo = jQuery(this);
    var row = combo.parent().parent();

    appViewModel.addRow();

    // Unbind
    combo.unbind('change');
    // Bind new combo
    jQuery('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
        combo: jQuery(this)
    }, handler)

    jQuery(row).find('input[name^="txtincmonth"]').removeAttr('disabled');    
};

Thanks in advance!!

Any reason not to use Knockout for binding the change event declaratively? E.g. <select data-bind="event: { change: ... }"></select> That way it is always present and wired up, and in the handler you can apply logic based on whether it is a new or changed row. — Tom W Hall
The reason your new rows had empty inputs is because in your addRow function, you're doing self.budgetDetails.push(new BudgetDetail(bDetails)), passing the bDetails array instead of the object inside. so change that bDetails to bDetails[0], for this example — antishok
@TomHall do you have any sample of how to set the event change on the databint declarative? — VAAA
Do you know how can I calculate the total so it sums all 1,2,3,4 etc in a row? Thanks — VAAA
@VAAA The binding would be like: <select data-bind="event: { change: changeIt }"></select> (omitted the options etc for clarity) and the handler on the view model would be like: self.changeIt = function(data, event) { ... }); where data is the current data binding context. Or, you could make the selected value an observable like in knockoutjs.com/examples/controlTypes.html and then subscribe to it instead of using a change handler. — Tom W Hall

Jim G. Jim G. · Accepted Answer · 2012-12-13T02:38:43

This might not be so much of a Knockout issue as it is a user interface issue.

I want to set all field values to "0.00" when the new row is added

Well that's easy enough. Simply initialize the the observable row to all zeros.

When I select an Income Account then another row is added to the viewmodel collection... and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.

This is probably a negotiable requirement.

Why not create an 'Add' button instead of insisting on this "nifty" behavior that adds a row when the user makes a section in the dropdown list?

Besides, even if we could accomplish what you're asking for (and I can envision a way that we could do this), what will you do when it's time to save the user's input to the server? Were you planning on ignore that last empty row?

Knockoutjs complex binding combo select table

1 Answers