Question

Is there any work around for client side data binding in mvc. I’m looking for something like implementing a observable pattern on client side somehow?

Answer 1

Take a look at knockout it might provide something like what you are after

From their site

Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax

Automatic UI Refresh When your data model’s state changes, your UI updates automatically

Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it

Templating Quickly generate sophisticated, nested UIs as a function of your model data

Also

Knockout is a JavaScript library that helps you to create rich,
responsive display and editor user interfaces with a clean underlying
data model. Any time you have sections of UI that update dynamically
(e.g., changing depending on the user’s actions or when an external
data source changes), KO can help you implement it more simply and
maintainably.

Headline features:

Elegant dependency tracking – automatically updates the right parts of
your UI whenever your data model changes. Declarative bindings – a
simple and obvious way to connect parts of your UI to your data model.
You can construct a complex dynamic UIs easily using arbitrarily
nested binding contexts. Trivially extensible – implement custom
behaviors as new declarative bindings for easy reuse in just a few
lines of code.

In order to prevent some of the additional work in creating viewmodels if you already have JSON objects being returned to the client you could use the Knockout Mapping plugin:

Knockout is designed to allow you to use arbitrary JavaScript objects
as view models. As long as some of your view model’s properties are
observables, you can use KO to bind to them to your UI, and the UI
will be updated automatically whenever the observable properties
change.

Most applications need to fetch data from a backend server. Since the
server doesn’t have any concept of observables, it will just supply a
plain JavaScript object (usually serialized as JSON). The mapping
plugin gives you a straightforward way to map that plain JavaScript
object into a view model with the appropriate observables. This is an
alternative to manually writing your own JavaScript code that
constructs a view model based on some data you’ve fetched from the
server.

There are also other frameworks that do similar things like:

• Backbone.js
• More alternatives here

If you want to implement it without using a “big” framework maybe take a look at this:

• https://stackoverflow.com/questions/1005300/example-of-javascript-observer-pattern