Control flow in KnockoutJS

foreach binding duplicates section of markup for each entry in an array. Binds each copy of that markup to array item. You can nest foreach binding with other control-flow bindings such as if and with. You can use special context property $data, to refer the current array item itself. You can also use $index to refer the index of current array element. $index is an observable. Similarly you can...

Read More

Introduction to KnockoutJS

KnockoutJS is a JavaScript library of MVVM pattern with templates. It does not depend on jQuery.  With KnockoutJS you can have, Dependency tracking : Automatically update UI when model changes Declarative bindings: Connect parts of your UI to your data model Extensible: Implement custom behaviors What is MVVM pattern Model : objects and operations in your business domain, this is independent...

Read More

Using Canvas and SVG in HTML5

Canvas <canvas> element is used to draw graphics using JavaScript. <canvas> element is only a container to hold the graphics. You must script it to draw the actual graphic. A canvas is a rectangular area on an HTML page.  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> Using...

Read More

Bindings in KnockoutJS

Visible binding # Make associate DOM element hidden or visible. Sets yourElement.style.display as none.  Text binding # Display associated text value on DOM. Since the binding sets your text value using a text node, its safe to set any string value without risking HTML or script injection.  HTML binding # KO sets element's innerHTML property to your parameter value. Don't use this...

Read More

Form field bindings in KnockoutJS

the article is incomplete click binding Normal 0 false false false EN-US X-NONE X-NONE ...

Read More

Template binding in KnockoutJS

Template binding populates the associated DOM element with the results of a rendering a template. It’s a good way to build UI structures.     <div data-bind="template: { name:'person-template', data: buyer }">     </div>     <script type="text/html" id="person-template">         <h3 data-bind="text: name"></h3>  ...

Read More