One needs to understand the “Separation of Concerns” while building an application:
- The Structure i.e. HTML
- Presentation i.e. CSS
- MVVM or
- Data binding structures
Also, all apps love data, so, how should we care about data and bindings. Somehow, we need to load data from somewhere, such as using an Ajax service or loading JSON data on your screen and after getting the data how will you respect changes from the user
So, what is Knockout?
- It allows you to have rich client-side interactivity for your UX provide a good pattern.
- It gives you a good separation of structure and behaviour.
- It provides you to use declarative bindings to be able to help you bind your UI elements, in case, HTML or even may be CSS styles and classes down to your source object.
- Offers you to work in MVVM pattern.
- It has a very good browser support. (IE6+, Firefox 2+, Chrome, Safari, Opera)
Key Concepts of Knockout:
- Dependency Tracking via observables (eg: a property depending on another property and it is in sync with a UI control and vice-versa(optional).)
- Templating Support (eg: you might have repetitive structures in your webpage like list of abc or rows in a list box, rows in a table or li in a ul/ol. You can use templates to take care of those views. You can use jQuery templates with Knockout, or native templates of Knockout or any third party templating engine.)
- Hello World Demo (Open in a good browser as CodePen needs it.)
The important factor is to understand the MVVM in terms of Knockout: the separation of concerns.
- MVVM is just a separation pattern and a way to organise your code structure to make it easier to maintain and to deal with separation and responsibilities.
- Works well with data bindings. (in this case its html)
- We have a view which is this case is HTML. ( is the user friendly presentation of information)
Between above two, we have logic to separate to how to present that model JSON data into the view itself and that is our view model.
It contains all the behaviour for the view that the view needs and can aggregate on or more models to show the data inside the view.
- Contains properties like firstName, methods and the Model.
- A quick demo
Visual Studio Extensions for your productivity
- Nuget - to manage 3rd party libraries and references.
- Web Essentials - code collapsing, vendor specific css properties, etc.
- Web Standards Update - html intellisense and validation.
- WoVS Default Browser Switcher - quickly change the default browser from visual studio.
- CSSCop - catches common CSS issues.
Begin Coding with Knockout and Visual Studio
- Either get the debugger or minified version from Github.
- Use Nuget to install Knockout.
Add intellisense for Knockout in Visual Studio for any *.js files by adding the following: & lt; reference path=“/scripts/knockout-2.2.0.debug.js” / & gt; at script-page level.
- After doing this, whenever you will type ko. you will see all the options that you can use from the Knockout library.
- It has to be the first line of code in the page and you have to comment it using “///”.
- Or use a tool like Resharper that will add the intellisense support for your project by its own.
- Knockout - http://knockoutjs.com
- Source Code - https://github.com/SteveSanderson/knockout
- Documentation - http://jpapa.me/kodocs
- Forums - http://jpapa.me/koforum
- Tutorials - http://learn.knockoutjs.com
- Stackoverflow - http://jpapa.me/kostackoverflow
- Ryan Niemeyer’s Blog - http://www.knockmeout.net
- jsFiddle - http://www.jsfiddle.net
- CodePen.io - codepen.io
Stay tuned for part - 2.