Question

I am creating a web application based on data using javascript. This data is stored as a js object and is constantly being updated using AJAX. The object has some methods to reorganize the data, such as sorting and filtering, as well as a method called render() which uses js templating to update the html to represent the data.

What I want is that every time the data object changes it automatically calls the render method to update the view. I know this can be done by just calling render() inside all my methods that modify the data, but I am looking for a cleaner way to do it.

I have read something about the observer pattern however I am not familiar with it and I don’t know if I can use that to achieve this. Also I know about the Object.watch() method but that is not supported by all browsers so I can’t use it.

Do you have any suggestions or examples about how can I do this?

Thanks.

Answer 1

Often, the flow is something like this:

1. Call Ajax;
2. On success return from the Ajax call, change the data;
3. Then call render( ) once to render everything;
4. Goto 1 after some interval or on some condition.

That gives you one render ( ) call for each Ajax update, which is likely what you want.

HTH