How to Get Started With Knockout_js

7/27/2019 How to Get Started With Knockout_js

1/8

Join the instructor-supported, online learning revolution on LearningLine.Learn more

US /UK-EMEA/Contact/Google+ AskDevelopMentor a Question 800.699.1932

HOME TRAININGo Training curriculumPublic scheduleOnsite trainingOnline coursesVirtual trainingGuerrilla

eventsONLINE COURSES

RESOURCESo Instructor BlogsWebcastsStackOverflowTutorialsNewslettersABOUT USo Company OverviewTechnical StaffSupport learningOur PhilosophyOur PartnersJob

OpeningsCONTACT

How to get started with Knockout.js

by:Maurice de Beijer

Online course: Client-side programming withKnockoutJS

Take an online, self-paced course from DevelopMentor, the first hour is free.
https://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=header0https://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=header0https://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=header0https://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=header0http://www.develop.com/knockoutjavascript?region=UKhttp://www.develop.com/knockoutjavascript?region=UKhttp://www.develop.com/knockoutjavascript?region=UKhttp://www.develop.com/contact/ushttp://www.develop.com/contact/ushttp://www.develop.com/contact/ushttp://www.develop.com/social/googleplushttp://www.develop.com/social/googleplushttp://www.develop.com/social/googleplushttp://www.develop.com/social/googleplushttp://www.develop.com/http://www.develop.com/http://www.develop.com/training-curriculumhttp://www.develop.com/training-curriculumhttp://www.develop.com/training-curriculumhttp://www.develop.com/schedulehttp://www.develop.com/onsitehttps://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=menuhttp://www.develop.com/virtualtraininghttp://www.develop.com/guerrillaeventshttp://www.develop.com/guerrillaeventshttps://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=menuhttps://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=menuhttp://www.develop.com/blogshttp://www.develop.com/blogshttp://info.develop.com/blogs/http://www.develop.com/webcastshttp://www.develop.com/StackOverflowhttp://www.develop.com/tutorialshttp://www.develop.com/newslettershttp://www.develop.com/companyoverviewhttp://www.develop.com/companyoverviewhttp://www.develop.com/companyoverviewhttp://www.develop.com/technicalstaffhttp://www.develop.com/howwesupportlearninghttp://www.develop.com/ourphilosophyhttp://www.develop.com/partnershttp://www.develop.com/jobshttp://www.develop.com/jobshttp://www.develop.com/contact/ushttp://www.develop.com/contact/ushttp://www.develop.com/technicalstaff#Maurice-de-Beijerhttp://www.develop.com/technicalstaff#Maurice-de-Beijerhttp://www.develop.com/technicalstaff#Maurice-de-Beijerhttp://www.develop.com/social/cta/?url=https%3a%2f%2flearninglineapp.com%2fcourses%2f14%2fclient-side-programming-with-knockoutjs%3futm_source%3ddevelop.com%26utm_campaign%3dlanding1http://www.develop.com/social/cta/?url=https%3a%2f%2flearninglineapp.com%2fcourses%2f14%2fclient-side-programming-with-knockoutjs%3futm_source%3ddevelop.com%26utm_campaign%3dlanding1http://www.develop.com/social/cta/?url=https%3a%2f%2flearninglineapp.com%2fcourses%2f14%2fclient-side-programming-with-knockoutjs%3futm_source%3ddevelop.com%26utm_campaign%3dlanding1http://www.develop.com/social/cta/?url=https%3a%2f%2flearninglineapp.com%2fcourses%2f14%2fclient-side-programming-with-knockoutjs%3futm_source%3ddevelop.com%26utm_campaign%3dlanding1http://www.develop.com/social/cta/?url=https%3a%2f%2flearninglineapp.com%2fcourses%2f14%2fclient-side-programming-with-knockoutjs%3futm_source%3ddevelop.com%26utm_campaign%3dlanding1http://www.develop.com/social/cta/?url=https%3a%2f%2flearninglineapp.com%2fcourses%2f14%2fclient-side-programming-with-knockoutjs%3futm_source%3ddevelop.com%26utm_campaign%3dlanding1http://www.develop.com/social/cta/?url=https%3a%2f%2flearninglineapp.com%2fcourses%2f14%2fclient-side-programming-with-knockoutjs%3futm_source%3ddevelop.com%26utm_campaign%3dlanding1http://www.develop.com/technicalstaff#Maurice-de-Beijerhttp://www.develop.com/contact/ushttp://www.develop.com/jobshttp://www.develop.com/jobshttp://www.develop.com/partnershttp://www.develop.com/ourphilosophyhttp://www.develop.com/howwesupportlearninghttp://www.develop.com/technicalstaffhttp://www.develop.com/companyoverviewhttp://www.develop.com/companyoverviewhttp://www.develop.com/newslettershttp://www.develop.com/tutorialshttp://www.develop.com/StackOverflowhttp://www.develop.com/webcastshttp://info.develop.com/blogs/http://www.develop.com/blogshttps://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=menuhttp://www.develop.com/guerrillaeventshttp://www.develop.com/guerrillaeventshttp://www.develop.com/virtualtraininghttps://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=menuhttp://www.develop.com/onsitehttp://www.develop.com/schedulehttp://www.develop.com/training-curriculumhttp://www.develop.com/training-curriculumhttp://www.develop.com/http://www.develop.com/social/googleplushttp://www.develop.com/social/googleplushttp://www.develop.com/contact/ushttp://www.develop.com/knockoutjavascript?region=UKhttps://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=header0https://learninglineapp.com/schedule?utm_source=develop.com&utm_campaign=header0


2/8

Once you get into doing more client side JavaScript code with business applications

and REST services you are going to run into the question of how to construct the

client side HTML required to show the data to the users.

Using jQueryAssuming most people are going to be usingjQueryon the client you might start with

some jQuery code to generate HTML.

Your code might look something like this

$(function () {

$("#btn").click(function () {

$.getJSON("/services/books").then(function (books) {

$.each(books, function () {

$("").text(this.Title + " by " +

this.Author).appendTo("#books");

});

});

});

});

The code isnt very complicated but then we are only showing a simple bit of text.

And in all likelihood the actual HTML that needs to be generated will be quite a bit

more complex. And the code increases as least as much, but often much more, in

complexity.

Using templates

The next step people tend to take is using templates. There are lots of different

templating libraries out there with more coming but in this example I am using

theJavaScript Micro-Templatingfunction John Resig wrote. If you are looking for

others take a look atUnderscore.jsorJsRender/JsViews(still in preview at the
http://jquery.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://jquery.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://jquery.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://ejohn.org/blog/javascript-micro-templating/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://ejohn.org/blog/javascript-micro-templating/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://ejohn.org/blog/javascript-micro-templating/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://borismoore.github.com/jsrender/demos/index.html?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://borismoore.github.com/jsrender/demos/index.html?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909https://github.com/BorisMoore/jsviews?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909https://github.com/BorisMoore/jsviews?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909https://github.com/BorisMoore/jsviews?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909https://github.com/BorisMoore/jsviews?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://borismoore.github.com/jsrender/demos/index.html?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://ejohn.org/blog/javascript-micro-templating/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://jquery.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909


3/8

moment). SpeciallyUnderscore.jsis a nice library to look at because all the additional

functions in there.

Using templates we separate the code from the template to generate the required

HTML. The code is easier to understand.$(function () {

$("#btn").click(function () {

$.getJSON("/services/books").then(function (books) {

var html = tmpl("books_tmpl", { books: books });

$("#books").html(html);

});

});

});

However this comes at a cost as we also need a template and that is a mixture of

markup and expressions. The expressions syntax varies depending on the templating

engine, in this case its.Not hard to use but it is

another bit of executing code that has to be maintained.

by
http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/underscore/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909


4/8

As you can see the template is actually embedded as a block. Not a

requirement as it is just a string but an easy way to do so. It does however mean that

you have to handcraft the HTML with no designer or IntelliSense support.

Using Knockout.js

As soon as we start usingKnockout.jsthis become somewhat more like

Silverlight/WPF. Not that it is exactly the same but it uses the same MVVM pattern

and data binding that Silverlight developers are used to. Something I really like. Now

Knockout.js is my no means the only way to do this, just as with templates there are

plenty of other options likeBackboneorJavaScriptMVCfor example. Seethisblog

post for a longer list of alternatives.

Personally I really like the MVVM and binding style Knockout.js uses.

Instead of splitting the HTML into a static and a dynamically generated part with

Knockout.js you embed data binding expressions in your HTML. Notice the data-bind

attributes in the following HTML snippet. They indicate data binding syntax. The first

two data bind the value property of the control to the firstName and lastName

from the ViewModel. The third data binds the text in the against the fullName

of the ViewModel.

Enter person

First name:

last name:
http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/backbone/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/backbone/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/backbone/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://javascriptmvc.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://javascriptmvc.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://javascriptmvc.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://javascriptmvc.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://documentcloud.github.com/backbone/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909


5/8

Full name:

So what does the view model look like? It can be a real simple JavaScript object. In

fact the following would work. It would be less than perfect thou and we can do

better.

var viewModel = {

firstName: "Maurice",

lastName: "de Beijer",

fullName: "Maurice de Beijer"

};

A better way is to use the Knockout functionality and define the data fields using

observables. By using Observables we can observer changes being made. And by

defining the fullName as a computed observable we can have the with the

fullName dynamically update. A much better ViewModel:

var viewModel = {};

viewModel.firstName = ko.observable("Maurice");

viewModel.lastName = ko.observable("de Beijer");

viewModel.fullName = ko.computed(function () {


6/8

return viewModel.firstName() + " " + viewModel.lastName();

});

Of course we still need to tell Knockout to use the ViewModel and that takes all of

one line:

ko.applyBindings(viewModel);

So the complete JavaScript in my page is now:

$(function () {

var viewModel = {};

viewModel.firstName = ko.observable("Maurice");

viewModel.lastName = ko.observable("de Beijer");

viewModel.fullName = ko.computed(function () {

return viewModel.firstName() + " " + viewModel.lastName();

});

ko.applyBindings(viewModel);

});

And the nice thing is that updating the first name automatically updates the fullName.


7/8

This is just the first baby steps using Knockout.js as it is far more capable than just

this. In fact we can data bind against arrays of data and create nice list etc.

TheKnockout.jssite has some nicetutorialsthat will help you get started.

Connect

Signup for our Free Newsletter!

Latest news

NEWEssential Application Lifecycle Management for Developers

August 27-30 2013

Now updated with Visual Studio 2012

Register Today!

Boston Oct. 7-11

Guerrilla Modern Web Development

NEW! Live webcasts.

Review the full schedule and register today.

Space is limited.
http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://learn.knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://learn.knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://learn.knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://www.develop.com/training-course/alm-application-lifecycle-management-traininghttp://www.develop.com/training-course/alm-application-lifecycle-management-traininghttp://www.develop.com/training-course/alm-application-lifecycle-management-traininghttp://www.develop.com/training-course/guerrilla-modern-web-development-with-aspnet-mvc-javascript-jquery-web-api-and-html5http://www.develop.com/livewebcastshttp://www.develop.com/livewebcastshttp://www.develop.com/guerrillaeventshttp://msmvps.com/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/theproblemsolver.metablogapi/0385.image_5F00_23150087.png?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://www.develop.com/livewebcastshttp://www.develop.com/training-course/guerrilla-modern-web-development-with-aspnet-mvc-javascript-jquery-web-api-and-html5http://www.develop.com/training-course/alm-application-lifecycle-management-traininghttp://learn.knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909http://knockoutjs.com/?ocid=aff-n-we-loc--DEV40909&WT.mc_id=aff-n-we-loc--DEV40909


8/8

Twitter FeedMORE

Testimonials

Very good! Bro ck Al len is very know ledgable and used his experience togreat effect. Callagh an R.

Home Training Onsite Webcasts Resources About us Contact

.NET 4.0 | Azure & Cloud Computing Training | Web Development Training | Java Training | C++ Training |Architecture & Design Training | SharePoint 2010 Training | Microsoft SQL 2011, Biztalk 2010, Team

Foundation Training | Agile Training | Business Analysis Training | Project Management Training | UML &

Unified Process Training | Hibernate / Spring / Struts Training | AJAX training | Silverlight 5 Training |

J2EE Training | ASP.NET Training | ASP.NET MVC Training | Entity Framework 4 Training | Windows

Workflow 4 Training

* DevelopMentor Provides Training Onsite at your location, Live Online Remotely, Virtually or in a Public

Classroom setting. DevelopMentor also offers other Learning Services: Consulting, Mentoring, Skills

Assessments for all involved in the Lifecycle of Software Projects. Some of the cities we provide Learning

Services and Training: Los Angeles, CA | Boston, MA | London, UK | Raleigh, NC | Atlanta, GA | New York,

NY | Chicago, IL | Dallas, TX | Denver, CO | San Francisco, CA | Seattle, WA | Omaha, NE | Phoenix, AZ |

Orlando, FL | Washington DC | Minneapolis, MN | Houston TX | Philadelphia, PA | San Diego, CA | San Jose,

CA | Austin, TX | Hong Kong | Toronto | Melbourne, Australia | Taiwan | Denmark | Dublin, Ireland | Oslo,Norway | Winnepeg | Milan, Italy | Scotland | Berlin, Germany | United Kingdom | Portugal | Barcelona,

Spain | India | Paris, France | Stockholm, Sweden | Netherlands | Turkey | St. Louis, MO | Birmingham, AL |

New Jersey | Maine | Portland, OR | Detroit, MI | Milwaukee, WI | Des Moines, IA | Tulsa, Oklahoma |

Louisville, KY | Biloxi, MS | New Orleans, LA | Boise, ID | Knoxville, TN | Iceland | Switzerland | Rio de

Janeiro, Brasil | Mexico | Houston, Texas | Chile | Columbia | Charlotte, NC | Columbus, OH

Copyright 2013 Digital Age Learning. All Rights Reserved |Terms of Use|Please Read our Privacy Policy
http://www.develop.com/social/twitterhttp://www.develop.com/social/twitterhttp://www.develop.com/http://www.develop.com/training-curriculumhttp://www.develop.com/onsitehttp://www.develop.com/webcastshttp://www.develop.com/blogshttp://www.develop.com/companyoverviewhttp://www.develop.com/contact/ushttp://www.develop.com/training-courses/.nethttp://www.develop.com/training-courses/cloudhttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/javahttp://www.develop.com/training-courses/c++http://www.develop.com/training-courses/architecture-designhttp://www.develop.com/training-courses/sharepointhttp://www.develop.com/training-courses/microsoft-servershttp://www.develop.com/training-courses/microsoft-servershttp://www.develop.com/training-courses/agilehttp://www.develop.com/training-courses/business-analysishttp://www.develop.com/training-courses/project-managementhttp://www.develop.com/search/umlhttp://www.develop.com/search/umlhttp://www.develop.com/training-courses/javahttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/javahttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/.nethttp://www.develop.com/training-courses/.nethttp://www.develop.com/training-courses/.nethttp://www.develop.com/termshttp://www.develop.com/termshttp://www.develop.com/termshttp://www.develop.com/privacyhttp://www.develop.com/privacyhttp://www.develop.com/privacyhttp://www.develop.com/privacyhttp://www.develop.com/termshttp://www.develop.com/training-courses/.nethttp://www.develop.com/training-courses/.nethttp://www.develop.com/training-courses/.nethttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/javahttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/javahttp://www.develop.com/search/umlhttp://www.develop.com/search/umlhttp://www.develop.com/training-courses/project-managementhttp://www.develop.com/training-courses/business-analysishttp://www.develop.com/training-courses/agilehttp://www.develop.com/training-courses/microsoft-servershttp://www.develop.com/training-courses/microsoft-servershttp://www.develop.com/training-courses/sharepointhttp://www.develop.com/training-courses/architecture-designhttp://www.develop.com/training-courses/c++http://www.develop.com/training-courses/javahttp://www.develop.com/training-courses/webhttp://www.develop.com/training-courses/cloudhttp://www.develop.com/training-courses/.nethttp://www.develop.com/contact/ushttp://www.develop.com/companyoverviewhttp://www.develop.com/blogshttp://www.develop.com/webcastshttp://www.develop.com/onsitehttp://www.develop.com/training-curriculumhttp://www.develop.com/http://www.develop.com/social/twitter

Documents

How to Get Started With Knockout_js