Knockout.js pro tips - working with templates - StrathWeb

Strath

August 8th, 2012

Knockout.js pro tips – working with templates

Because templating in KO can be very flexible

Just like last time, when we discussed observable arrays, I wanted to share a few (hopefully) useful tips about working with templates in Knockout. This is not going to be a comprehensive look into templating with knockout – there are plenty of resources that cover that – but rather a collection of smaller pieces of advice that could make you life easier.

Again, familiarity with Knockout is assumed.

Easy, reusable templating in Knockout.js

Templating can be a pain if you want to reuse the same template over multiple pages. You are not going to copy paste your templae in every page, are you? You could be using the excellent Knockout.js External Template Engine instead.

In short, it allows you to define the templates in external files and load them dynamically on runtime. It actually plugs itself very well into KO, as it overrides the existing template engine, so you can use all the same familiar bindings.

A quick peek at the code. Let’s say you have a team template that you wanna reuse over and over. Declare it in a separate file.

Now in your HTML, reference the engine

You need to specify the relative path to your templates in your JS code.

And you can start using the template, calling them using KO’s familiar “name” property of the template binding.

By default the name of the template actually corresponds to the name of your template file. There is a ton of other congiuration options, such as name suffix/prefix, or caching options, so make sure to check them out! But most importantly, you can now call the same template on different pages.

You can render templates directly from your custom bindings

If you find the need to do so, you can manually render templates from your JS code. One such example could be rendering templates from your custom bindings (which might do some sopohisticated, tailored processing).

Consider a simple example:

Now, imagine you have some custom binding – you can easily render templates from it:

The renderTemplate method takes in templateName, bindingContext, rendering engine options, DOM element to use and template rendering mode as arguments.

And you would setup the HTML accordingly:

Of course this is a very trivial sample, but I hope it illustrates the gist of it – leveraging on ko.renderTemplate, and calling it manually whenever needed.

Use inline templating whenever possible

Inline templating – and using foreach binding, performs around 1/3 faster than applying template from a separate DOM element, the so-called named template binding.

Michael Best has put together a really nice performance shootout between the two approaches.

So whenever you do not plan to reuse the template use the inline foreach binding instead of separate template element.

You can render a template within a template

This might seem like a trivial thing but many people don’t know about it. You can actually reference another template in a template and build up your HTML output like that.

This way you might have smaller reusable snippets of HTML to use on different pages and inside of different templates.

So it’s perfectly fine to do something like this:

You could also pass the data or foreach property to the child template to change its context. Again, a simple example:

As you see, you can structure your data and reuse your templates quite easily that way.

Avoid combining other bindings with template binding

This is a great insight provided by one and only RP Niemeyer on his blog.

Basically, due to the nature of how binidngs are processed, you should avoid combining other bindings with template binding, especially under data-heavy scenarios. Knockout uses one computed observable to track all binidngs of an element, so change to one dependency triggers update events for all of the element’s bindings. I really recommend reading that article by Ryan, it’s a terrific insight into the inner wokrings of Knockout.

Example. Instead of combining them on one DOM element:

Split them:

Summary

Templating is a large and important part of Knockout.js. As everything in JavaScript it can be extremly powerful and flexible, but if not used properly can lead to nasty consequences.

Hopefully a couple of these tips will help manouver through the exciting worl of Knockout!

Ps. This article has also been translated to Serbo-Croatian language by Vera Djuraskovic from Webhostinggeeks.com.

Be Sociable, Share!

  • Pingback: Dew Drop – August 9, 2012 (#1,381) | Alvin Ashcraft's Morning Dew

  • Sac Herms

    This is one awesome blog. Really thank you! Great.

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1165

  • Pingback: Knockout Templating « TechnoBuzz

  • http://activeengine.wordpress.com David Robbins

    Nice post. I wasn’t aware of the External-template engine and will give it a try. This should cut down on the need to re-compile so much when there are changes.

  • http://simplygoodcode.com Luis

    This is great, I had a question. Are there any plugins out there that your recommend to simplify the knockout binding. I created on of my own that takes inspiration from {{handlebars}} and mustache. But I was wondering if you knew of any. You can find mine here: http://www.simplygoodcode.com/2012/05/simpler-binding-syntax-for-knockout.html

  • oem software

    Thanks-a-mundo for the blog.Really thank you!

  • Waldi

    thanks for posting this, it really is informative

  • http://nonstopwords.com wordsearch puzzle

    Ko is simple great, it enabled me to build a simple online game http://nonstopwords.com in just a few weekends

  • javier

    and what about templating for page layout like top bar, going to “abou”, “blog”, and some other sections of the sites where you tipiclaly reuse almost it all!? can you give an example?!

    Thanks!

    javier

  • William

    I have script in a template that I would like to run when the template is loaded – any ideas?

  • Tochi Eke-Okoro

    Nicely explained. Makes a lot of sense!!!

  • Timothy Erwin

    what is the difference between handlebars and knockout? can they be used together, or is knockout better because of the bindings?