Question

I’m using the knockout mapping plugin to auto-create my views for me, and they’re working fine.

However, I’m using Raphael.js to produce a gauge based on the values in my mapped object, but I noticed that the gauge would get re-drawn for every observable that was updated. Given that there are a large number of these gauges on the page, having them each re-drawn three times each time I get new data back from an AJAX call is not great for performance.

So, I’ve changed all but one of the properties on the object to normal javascript properties, using copy in the mapping options.

Now the issue I have is that the one observable property is being updated before all of the straight javascript properties have been updated, so parts of the gauge are out of sync. Specifically, the observable property is DisplayValue, which I output as text in the middle of the gauge, whereas I also have a normal property PercentValue that I use to actually draw the line on the gauge. So DisplayValue is updating before PercentValue, which causes the gauge to be re-drawn, meaning that the line on the gauge always shows the last PercentValue, not the current one.

I’ve looked at the throttle extender, and it appears that I’d have to add in a computed property that contained both my observables for this to work, but I don’t like the idea of having to add a property in just to get this functionality. Equally, I assume that I could add an observable property (LastUpdated, for example) and manually update that after the whole object has been updated, but that also feels unsatisfactory.

There does appear to be an issue raised for a combinedObservable, so I guess that there is no way of doing this at the moment in the way I’d like.

So, is there a better way of doing this entirely? Is there some way of getting the normal javascript properties to be updated before the observables? I’m guessing that the properties are processed alphabetically?

Answer 1

I’ve mostly implemented RP’s suggestion, but as he put it as a comment, and I’ve implemented it slightly differently, I thought I’d answer it here in full, in case it’s any use to anyone else.

I’ve made all the properties that my gauge uses normal JS properties, rather than leaving the DisplayValue as an observable, but I’ve added a new observable property to the object, called updated. Once I’ve used the mapping plugin to copy the new data over to the existing object, I use the valueHasMutated method RP mentioned above.

ko.mapping.fromJS(point, existingPoint);
existingPoint.updated.valueHasMutated();

I’ve got a knockout custom binding handler which I tie to the observable property using

ko.utils.unwrapObservable(viewModel.updated);

and now I only get one update event fired. Obviously, I still don’t think that this is ideal, but unless the mapping plugin gets an option to only fire that an observable has been updated once it has copied all the normal properties over, this is probably the best option.