Question

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

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

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!!

Answer 1

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?