Hello everyone,

Today i’m gonna show you something which you’ll really love to work with. It’s template engines.
Template engines are libraries which is used to manage large amount of data. Actually creates customized data-structures for the front-end. This picture may clarify the functions of template engines.

templating-engine

When the font-end acquires data, the back-end replies with a row data which need to be formatted in a well organized data-structure and then viewed at the front-end.

It’s the template engine task to do so.

This will show you how the template engine manages data
dt

and there’s the final step, managing the view

view

There are various template engines like Mustache , Ember js and Knockout js

I prefer to use Knockout. Knock out uses MVVM (Model View View Model).

All you need is to create your view model, add observables to it and apply it.

Observable are used in knockout wherever you want to track properties. Then apply your model view model.
Observables has setters and getters. To set it’s values you need to deal with

ko.observable("Your value goes here");

And the getter is the observable name
for example suppose you need to define an observable for username

function viewModel(){
    this.username = ko.observable("Alaa Attya");//setting username observable value
}

var vm = new viewModel();
ko.applyBindings(vm);

You need to know that each observable tracks a specific data-bind. And data-binds has many types text, value, event,…. you can go and see the documentation.If you wanna create an input text which you wanna track it’s values.

follow this example http://jsfiddle.net/AlaaAttya/PAZ82/1/

That’s the big idea behind the template engines, hope you enjoyed.

Thanks 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s