Download to read offline
![Demo - 5
• Binding Contexts
$root
$parent
$parents
$parents[0] == $parent
$parent[1] … $parent[n]
$data
Demo
http://jsfiddle.net/balain/nu91g603/6/
http://knockoutjs.com/documentation/binding-context.html](https://image.slidesharecdn.com/knockout-150128152750-conversion-gate01/75/Knock-out-Introduction-with-samples-jsfiddle-net-13-2048.jpg)
Uploaded byBalakrishnanan Ganesan
Knock out Introduction with samples (jsfiddle.net)
KnockoutJS is a client-side MVVM JavaScript library that is 40kb minified and 166kb debug. It has no dependencies and works on all mainstream browsers. KnockoutJS uses data-binding and automatic UI refresh to provide a high level link between the UI and data model. It features dependency tracking, declarative bindings, and templating. The document includes examples of basic bindings, custom bindings, mapping data, and binding contexts in KnockoutJS.
More Related Content
![[Blibli Brown Bag] Nodejs - The Other Side of Javascript](https://cdn.slidesharecdn.com/ss_thumbnails/i9sycn9mqmawqhdzv0i6-signature-6c4174f35aa29065af3a8befc1a3a39ca764f84b5c082116486141991cd72c8c-poli-160225041632-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Knock out Introduction with samples (jsfiddle.net)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Knock out Introduction with samples (jsfiddle.net)
- 1. KnockoutJS Introduction Prepared by :Balakrishnan
- 2. KnockoutJS Introduction • Client-SideMVVM JavaScript Library • 40kb (minified), 166kb (debug) • No dependencies • Works on all mainstream browsers IE6+, FF2+, Chrome, Safari, Opera • Developed with BDD • NuGet or knockoutjs.com
- 3.
- 4. Knockout Features Dependency Tracking AutomaticUI Refresh Declarative Bindings Templating
- 9. Demo - 1 •Basic Example • data-bind attribute • ko.observable() • Ko.observableArray() • ko.applyBindings() • Demo • Basics jsFiffle.net/BalaIn • Dropdown
- 10. Demo - 2 •Basic Example • Built In bindings • Click • Visible • Css • Value • Text • Style • hasFocus • Submit • Demo • Submit • hasFocus
- 11. Demo - 3 •Custom Binding • Template • Demo • http://jsfiddle.net/balain/nu91g603/ • http://jsfiddle.net/balain/nu91g603/3/ • http://jsfiddle.net/balain/nu91g603/2/
- 12. Demo - 4 •Some basic mapping (without mapping plugin) • ko.utils.arrayMap() • Mapping (without mapping plugin) • Ko.utils.parseJson() • Save data • Ko.toJSON(viewModel) • Demo • http://jsfiddle.net/ybo0zrwh/ • http://jsfiddle.net/balain/berthw4c/ • http://jsfiddle.net/rniemeyer/vdcUA/ • http://www.knockmeout.net/2011/04/utility-functions-in- knockoutjs.html
- 13. Demo - 5 •Binding Contexts $root $parent $parents $parents[0] == $parent $parent[1] … $parent[n] $data Demo http://jsfiddle.net/balain/nu91g603/6/ http://knockoutjs.com/documentation/binding-context.html
- 14.
- 17. Why Knockout • Highlevel link between UI & data model • Extensible • Usable in existing apps/architecture • Learning Resources • Same MV* pattern & benefits as other solutions
- 18. Resources • knockoutjs.com Live Examples/Tutorials Documentation •Knock Me Out - Ryan Niemeyer’s blog • http://www.dotnet-tricks.com/Tutorial/knockout • Debugging Ko • jsFiddle
- 19.