Using Knockout.js to dynamically aggregate fields.
Many times when working on the presentation layer of an application the need arises to present a value which is the result of aggregating the values of two or more fields.
In this article I will illustrated how to combine the values from three fields and assign it as the value from a new field.
I’ll begin with HTML for both name fields and one field to represent a sales associate’s revenue.
Also, I’ll one more field which I’ll use to assign the computed values of the first three fields.
In order to have my ViewModel notified of changes and have its properties updated with those changes, I’ll assign observables to each property.
Also, I’ll use the “computed()” function to grab the values from the firstName, lastName, and SalesRevenue controls to aggregate a new value which is then assigned to the SalesAssociateOverview property.
In order to format the Sales Revenue appropriately, I applied a currency format.
When my page loads, the default values are aggregated together and assigned to the SalesAssociateOverview property.
When I change each fields, the observables ensure my ViewModel’s properties are notified and my computed value is updated accordingly.