Question

Here’s a fiddle with a few things omitted: http://jsfiddle.net/YwTBk/

Essentially what is needed to get the image below is simply editing the first row. For some reason, Knockout is filling all of the rows under that column with the same value. It happens for the amount, nrAmount, and of course the computed total column. None of the other columns have this problem.

It is interesting to note that changing the binding from amount to $data.amount has the effect of making the computed column nrAmount not work anymore but it doesn’t cause all of the rows to get populated.

Why is this happening and how can I fix it?

Answer 1

Here is an updated fiddle that ‘works’, I guess – http://jsfiddle.net/YwTBk/2/. Your description of the problem doesn’t match the fiddle you referenced, so it’s hard to say for sure.

The bigger problems I fixed were as follows:

1. As Niko mentioned, you need var self = this; at the top of your viewmodels.
2. I moved addBlankRecord inside your viewmodel so that the self reference in the addBlankRecord method will work.
3. I updated the populateBlankRecords method so that it references the addBlankRecord on your ViewModel
4. For your bindings, I updated the bindings for categories and removeRecord to $parent.categories and $parent.removeRecord because neither of those are found in the Record viewmodel.

There were also several smaller issues that I’m guessing were a result of things being stripped out of your code. Some of these were referenced by other comments.

• the removeRecord, GetDepartments, and GetCategories methods did not exist
• there was no table HTML tag
• there were no references to jQuery or KnockoutJS

Does this fix your problem? If not, it would be very helpful if you could provide a fiddle that demonstrates the problem.