Knockout.js Simplified

Knockout is a fantastic JS library for data binding and dynamically generating complex HTML. It helps a lot in developing applications which are loosely coupled and where there is minimum dependency between the data and the views.

Before I knew knockout, I used to generate all my repetitive HTML right from my JavaScript file. This had significant disadvantages:
1) Every time I had to change my display code, I had to modify the JavaScript file.
2) The JavaScript file contained the business logic as well as the display logic of my application. This used to make the file very complicated to maintain.
3) If a UI designer had to change the HTML, he would have to consult me in order to look for where to make the changes so that the generated HTML would be according to his requirements.

With knockout, we can keep all the display logic (HTML) in the .html file while all the data logic (and business logic) can be separated in the JavaScript file.

Knockout JS implements the MVVM pattern for developing applications. Now if you are a beginner, all these acronyms like MVC/MVP/MVVM might get confusing. So let me try to explain what exactly is meant by the MVVM pattern.

MVVM stands for Model-View-ViewModel. I know this does not help you at all so let me go in a bit of detail:

Model : Your data. Typically a JSON or XML object which contains data fetched from different data sources like Web Services, SQL Tables, SharePoint Lists etc.

ViewModel: The component which aggregates the data into a format which the View expects. ViewModel also manages combining data from multiple Models. It also handles formatting, sorting, filtering of the data based on custom business logic.

View: HTML Structure which will display data to the user.

Hope that was helpful.

Now lets get into the code right away! We will be looking into a simple example where we will be getting data from an JavaScript Array (Model), filling that data into a ViewModel and then binding that ViewModel to the View (HTML).

Since this article is just introduction to KnockoutJS, I have kept it really simple. I have included the JS code as well as the HTML code in the same file so that it is easier to understand. You will want to separate out the JS code in a different file.

Here is the code:

	<!--jQuery is not necessary but we have used it to call our FillData function on the document.ready event -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<!--Knockout.JS-->
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
	<!-- THE VIEW-->
	<div id="BlogListContainer">
	<b>
	<span data-bind="text:ListTitle"></span>
	</b>
	<ul data-bind="foreach: BlogArticles">
	<li>
	<a data-bind="attr: { href: ArticleUrl }">
	<span data-bind="text: ArticleTitle"></span>
	</a>
	</li>
	</ul>
	</div>
	<script>
	//Application Start
	$(document).ready(function(){
	FillData();
	});
	//Class for Blog Article
	function BlogArticle(name, url) {
	var self = this;
	self.ArticleTitle = name;
	self.ArticleUrl = url;
	}
	//THE VIEW-MODEL
	//View Model for formatting and generating the data.
	function BlogArticleViewModel() {
	var self = this;
	//KO observable value
	self.ListTitle = ko.observable();
	//KO observable Array
	self.BlogArticles = ko.observableArray([]);
	//Custom funtion to add a new BlogArticle to the BlogArticles observable array.
	self.AddBlogArticle = function (name, url) {
	self.BlogArticles.push(new BlogArticle(name, url));
	}
	}
	function FillData(){
	//Create a new instance of the ViewModel
	var blogViewModel = new BlogArticleViewModel();
	//Bind the View Model to the View
	ko.applyBindings(blogViewModel, document.getElementById("BlogListContainer"));
	//THE MODEL
	//Data in form of JavaScript Array consisting of JSON objects. This data can be fetched from any source like WebService, SP List etc.
	var BlogsDataModel = [{ name:"Vesa Juvonen", url:"https://blogs.msdn.microsoft.com/vesku/"},
	{ name:"Chris O'Brien", url:"http://www.sharepointnutsandbolts.com/"},
	{ name:"Waldek Mastykarz", url:"https://blog.mastykarz.nl/" }];
	//Add the ListTitle Property which will be the Title of the List
	blogViewModel.ListTitle("Top SharePoint Blogs");
	//Fill the ViewModel with the data from the Model
	for (var i = 0; i < BlogsDataModel.length; i++) {
	var currentBlog = BlogsDataModel[i];
	var name = currentBlog.name;
	var url = currentBlog.url;
	//Use custom function to add the items to the ViewModel
	blogViewModel.AddBlogArticle(name, url);
	}
	}
	</script>

view raw KnockoutDemo.html hosted with ❤ by GitHub

For more details and tutorials, please see the Knockout.JS documentation which is really nice and detailed: http://knockoutjs.com/documentation/introduction.html