KnockoutJS Templating KnockoutJS

What is KnockoutJS Templating?

Template is a set of DOM elements that can be employed repetitively. Templating enables it simple to build complex applications because to its property of reducing duplication of DOM elements.

Mainly, there are 2 ways of creating templates:

  • Native templating - This method supports control flow bindings like with, foreach, and if. These bindings will capture HTML markup present in the element and employ it as template for random items. There is no need of external library for this type of templating.
  • String-based templating- KO connects to third party engine for passing ViewModel parameters into it and inserts resulting markup into document. E.g. JQuery.tmpl and Underscore Engine.

Syntax

Note that type is facilitated as text/html in script block for notifying KO that, it is not an executable block and is simple template block which requires to be rendered.

Parameters

Combination of below properties can be sent as parameter-value to template.

  • Name - This specifies name of template.
  • Nodes - This specifies array of DOM nodes to be used as template. This parameter is ignored if name parameter is passed.
  • Data - This is nothing but data to be displayed via template.
  • If - Template will be served if the given condition results in true or true like value.
  • Foreach - To serve template in foreach format.
  • As - This is simply for creating an alias in foreach element.
  • afterAdd, afterRender, beforeRemove - These are all for specifying callable functions to be executed according to operation performed.

Observations

Rendering a named template

Templates are defined implicitly by HTML markup inside DOM when employed with control flow bindings. But if you wish to, you can factor out templates into a distinct element and then refer them by name.

EXAMPLE

OUTPUT

  • Let us carry out the below steps to see how the above code works:
  • Save the above code in template-named.htm file.
  • Open this HTML file in a browser.
  • Here friend-template is used 2 times.

KnockoutJS  Templating

Using "foreach" in template

Following is an example of using foreach parameter including template name.

EXAMPLE

OUTPUT

  • Let us carry out the below steps to understand how the above code works:
  • Save the above code in template-foreach.htm file.
  • Open this HTML file in a browser.
  • Here foreach control is employed in template binding.

KnockoutJS  Templating

Creating alias using as keyword for foreach items

Following is how an alias can be generated for a foreach item:

By creating alias it becomes simple to point to parent objects from inside of foreach loops . This feature is advantageous when the code is complicated and nested at multiple levels.

EXAMPLE

OUTPUT

  • Let us carry out the below steps to understand how the above code works:
  • Save the above code in template-as-alias.htm file.
  • Open this HTML file in a browser.
  • Alias is employed instead of full name of arrays.

KnockoutJS  Templating

Using afterAdd, beforeRemove and afterRender

There are some scenarios where in separate custom logic is required to be run on DOM elements created by template. In that case below callbacks can be employed. Look that you are employing foreach element then

afterAdd - This function is triggered when a new item is appended to array stated in foreach.

BeforeRemove - This function is triggered just before detaching the item from array stated in foreach.

AfterRender - Function stated here is triggered each time foreach is rendered and new entries are appended to array.

EXAMPLE

OUTPUT

  • Let's carry out the below steps to understand how the above code works:
  • Save the above code in template-afterrender.htm file.
  • Open this HTML file in a browser.
  • Here afterProcess function is performed each time foreach is rendered.

KnockoutJS  Templating

Choosing template dynamically

If there are various templates present then one can be selected dynamically by mentioning name as observable parameter. So template value will be again calculated as the name parameter alters and again data will be get re-rendered.

EXAMPLE

OUTPUT

  • Let us carry out the below steps to understand how the above code works:
  • Save the above code in template-dynamic.htm file.
  • Open this HTML file in a browser.
  • Template to be employed is determined according tothe active flag value.

KnockoutJS  Templating

Using external string based engines

  • Native templating functions excellently with different control flow elements similar to nested code blocks. KO also provides a way to link with external templating library such as Underscore templating Engine or JQuery.tmpl.
  • As stated on official site Jquery.tmpl is no longer under operation since December 2011. Hence KO's native templating alone is advised in place of JQuery.tmpl or any other string depended template engine.

Please refer to official site for more information on this

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

KnockoutJS Topics