CODEWITHSUNDEEP
asp.netasp.net-mvc-3asp.net-mvc-2
afr0
afr0

Reputation: 888

observable pattern on client side

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?

Upvotes: 0

Views: 233

Answers (1)

Daniel Powell
Daniel Powell

Reputation: 8293

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:

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

Upvotes: 2

Related Questions