Take the 2-minute tour ×

I am building MVC3 application and need some general guidelines on how to manage complex client side interaction between my components.

Here is my definition of one component in general way:

Component which has it's own controller, model and view. All of the component's logic is placed inside these three parts and component is sort of "standalone", it contains it's own form, data needed for interaction, updates itself with Ajax and so on.

Beside this internal logic and behavior of the component, it needs to be able to "Talk" to the outside world. By this I mean it should provide data and events (sort of) so when this component gets embedded in pages can notify other components which then can update based on the current state and data.

I have an idea to use client ViewModel (in java-script) which would hookup all relevant components on page and control interaction between them. This would make components reusable, modular - independent of the context in which they are used.

How would you do this, I am a bit stuck as I do not know if this is a good approach and there is a technical possibility to achieve this using java-script/jquery. The confusing part is about update via Ajax, how to ensure that component is properly linked to ViewModel when component is Ajax updated (or even worse removed or dynamically added). Also, how should this ViewModel be constructed and which technicalities to use here and in components to work as synergy???

On the web, I have found the various examples of the similar approach, but they are oversimplified (even for dummies) or over specific and do not provide valuable resource or general solution for this kind of implementation. If you have some serious examples it would be, also, very helpful.

Note: My aim is to make interactions between many components on the same page simpler and more robust and elegant.

share|improve this question
add comment

1 Answer

It sounds like you're struggling with :

  • Maintaining a "rich" UI
  • Doing most of your interactions via AJAX to the controller
  • Keeping the front-end in sync with results of AJAX actions

If I've understood your issue correctly, you may want want to check out KnockoutJS, which is a javascript framework built for handling just these kind of scenarios. Take yourself through the interactive tutorial examples, it'll build the concepts you need slowly and logically. Quite a nice framework.

share|improve this answer
Yes, you are absolutelly right. I have seen the Knockout before and it provides nice publish/subscribe mechanism. I just do not know the proper way to decouple component data and events from specific VM used in some page. In other words, how do you link component events and data to VM? It is pretty straighforward in static page scenarios, how to achive this when page is lot more dynamic and changes significantlly via Ajax (component is added/removed dynamically)? –  Dusan Jun 13 '12 at 9:29
add comment

Your Answer


