| ▶ JSON string from server |
| ▶ Converted to an object with ko.parseJSON |
| ▶ Mapped to use observables, add a computed (dependentObservable) |
| ▶ Use ko.utils.arrayMap (used categories) |
| ▶ Use ko.utils.arrayGetDistinctValues (unique categories) |
| ▶ Use ko.utils.compareArrays (not used categories) |
| ▶ Convert items to JSON |
| ▶ Map items to send back to server and convert to JSON |
| ▶ Display in an editor | |
| ▶ Filter display by name | Filter: |
| ▶ Find first match by name | Search: |
| Category | Name | Price | Tax | |
|---|---|---|---|---|
| Add Item | Total: |
This example shows how computed observables can be chained together.
Each cart line has a ko.computed property for its own subtotal, and these in turn are combined in a further ko.computed
property for the grand total. When you change the data, your changes ripple out through this chain of computed properties,
and all associated UI is updated.
This example also demonstrates a simple way to create cascading dropdowns.
In the sample above there is no meaning to the Category, it has meaning with the Price and (5%) Tax.
In the sample below changes to Category reset the missing Product selection.
| Category | Product | Price | Quantity | Subtotal | |
|---|---|---|---|---|---|
| Total value: |
 |
| ▶GiftShop Index |
| [ NorthWind: Products By Category using a json view model in a Cart Editor ] |
| [ Planet Display ] |
| [ Friends Display ] |
| [ knockoutDATA_BIND ] |