Master detail views with Knockout.js - how to update master?

Question

I'm working on a master detail view using Knockout.js. Basically, everything works fine, with one little drawback: Whenever the item that is currently shown in the detail view is changed, the master does not update itself accordingly.

Basically, I understand why this is:

• The master view is based upon a ko.observableArray and as such it only keeps track of inserting and removing items. It does not react on updated items.
• Whenever an item is selected, it is put into a ko.observable which is the base for the detail view.
• As soon as the detail view has been updated, the array automatically contains the right data (as it is using the very same object), but it does not reflect the changes to the UI (since no items have been inserted or updated).

The question now is how to deal with this in an elegant and correct way?

I can currently think of two possible solutions:

• Wrap each item within the array in a ko.observable. This way it will detect any changed made in the details view and update the UI accordingly.
• Or: "Copy" the edited item using JSON.parse(JSON.stringify(...)); and replace() the entry within the array with the cloned object. As now an object has been removed and inserted internally, the array detects the change and updates UI.

The problem:

• The first solution is not easily viable for large amounts of data. At least it will slow down everything.
• The second solution works fine, but is ... uhm, well, ... simply not nice ;-)

Any better ideas?

Answer 1

IMHO - I can't never know all performance issues. Your explained first solution is simple and do what you want. A possible other way is rebind contained tags to a ko.computed(...).