Within my grid of observables and computed observables, the first row serves as a multiplier for all subsequent rows. Users can modify this percentage rate and Knockout automatically updates all relevant values accordingly. Additionally, I require a textbox where users can input a new percentage rate to be applied uniformly across the entire grid.
The initial binding and single rate update functionality are functioning correctly.
An issue arises when attempting to loop through the view model after a value is entered in the textbox. The script encounters a JavaScript warning due to the repetitive nature of updating each percentage rate within the grid columns (which represent monthly values) only 12 times.
I experimented with using the throttle extender, but it did not resolve the problem. Any suggestions?
Update: Though uncertain if it will provide a solution, here is some additional code
$("#NewRate").change(function (e) {
var newRate = parseFloat($(this).val());
for (var i = 0; i < 12; i++) {
viewModel.resourceCategory.monthAmounts[i].amount(newRate);
}
});
function ConvertToDate(jsonDateString) {
var re = /-?\d+/;
var m = re.exec(jsonDateString);
return new Date(parseInt(m[0]));
}
function MonthAmount(amount, dateKey) {
var self = this;
self.amount = ko.observable(amount).extend({ throttle: 1 }); //using the throttle to avoid "long running script" warning in IE
self.dateKey = ConvertToDate(dateKey);
self.monthIndex = self.dateKey.getMonth();
}
function ResourceCategory(name, monthAmounts) {
var self = this;
self.name = name;
self.monthAmounts = ko.utils.arrayMap(monthAmounts, function (monthAmount) {
return new MonthAmount(monthAmount.Amount, monthAmount.DateKey);
});
self.totalAmount = ko.computed(function () {
var sum = 0;
for (var i = 0; i < self.monthAmounts.length; i++) {
sum += parseFloat(self.monthAmounts[i].amount());
}
return sum.toFixed(2);
}).extend({ throttle: 1 }); //using the throttle to avoid "long running script" warning in IE
self.averageAmount = ko.computed(function () {
return (self.totalAmount() / self.monthAmounts.length).toFixed(2);
}).extend({ throttle: 1 }); //using the throttle to avoid "long running script" warning in IE
}
function ResourceCategoriesMonthTotal(monthIndex, resourceCategories) {
var self = this;
self.monthIndex = monthIndex;
self.dateKey = new Date(new Date().getFullYear(), monthIndex, 1);
self.amount = ko.computed(function () {
var val = 0;
for (var i = 0; i < resourceCategories.length; i++) {
val += parseFloat(resourceCategories[i].monthAmounts[self.monthIndex].amount());
}
return (val).toFixed(2);
}).extend({ throttle: 1 }); //using the throttle to avoid "long running script" warning in IE
}
self.resourceCategoriesMonthTotals = new Array();
for (var monthIndex = 0; monthIndex < 12; monthIndex++) {
self.resourceCategoriesMonthTotals.push(new ResourceCategoriesMonthTotal(monthIndex, self.resourceCategories));
}
self.resourceCategoriesTotal = ko.computed(function () {
var val = 0;
for (var i = 0; i < self.resourceCategoriesMonthTotals.length; i++) {
val += parseFloat(self.resourceCategoriesMonthTotals[i].amount());
}
return (val / self.resourceCategoriesMonthTotals.length).toFixed(2);
}).extend({ throttle: 1 }); //using the throttle to avoid "long running script" warning in IE