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.
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
and there’s the final step, managing the 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 [code]ko.observable(“Your value goes here”);[/code]
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
That’s the big idea behind the template engines, hope you enjoyed.
Thanks 🙂