Tag: HTML Templates

Object JavaScript – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser

May 2, 2014

knockoutIn the previous post, Using Infuser to Asynchronously Load Your Templates, we took a detour into Infuser and how it can be used to call template code. But what about calling Knockout templates?

You will probably want to put a template into a separate file so you can reuse it across various pages on your site.

koExternalTemplateEngine is a JavaScript library built on top of Infuser for you to load templates asynchronously from a remote resource. It currently supports both native and jquery templates.

And you’ll see how you can use Infuser to configure your Knockout Template Engine.

Continue reading “Object JavaScript – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser”

Object JavaScript – Using Infuser to Asynchronously Load Your Templates

April 30, 2014

imageIn Introduction to Templates in MVVM Using Knockout.js, Mustache, you learned how you can use templates to a display and interact with Knockoutjs. But what if you would like to reuse those templates? Would you like to be able to load the templates asynchronously? And would you like to use the same techniques to load templates that could be using in Knockout, underscore and jquery-tmpl?

Jim Cowart wrote infuser to provide a “generic-ized” utility that could interface with a given template engine and handle the fetching of templates from a remote resource.

This means you can put your template content in a folder so you can reuse it in multiple places. If your template engine expects your templates to be in SCRIPT tags, you don’t have to lose syntax highlighting, etc. in your IDE – you can still place them in their own files with a valid markup extension .

Continue reading “Object JavaScript – Using Infuser to Asynchronously Load Your Templates”

Object JavaScript – Introduction to Templates in MVVM Using Knockout.js, Mustache

April 29, 2014

knockoutYou can use template feature in Knockoutjs to render your data. Templates are a straight forward way to build complex UI structure, often with repeating or nested blocks. You can use templates to show repeating data, such as data in tables or portfolios.

From the point of view of Object JavaScript, templates help you further separate out the code that gets and sets the data, from the code that renders the data. Templates provide you a way to reuse similar views throughout your application. And they help you isolate the view that deals with data in a way that you can find and understand in your own code.

Templates as they are used in this post, are reusable chunks of HTML that relate to your observables in Knockout.

There are two main ways of using templates:

  • Native templating where you use foreach, if, with and other control bindings. The control flow bindings use the HTML markup in your element and render against your data. The feature is built into Knockout.
  • String-based templating connects Knockout to third-party template engine, such as jQuery Templates, MustacheJS, or underscore.

In this post, you will learn the basics of using templates in your HTML application using JavaScript.

Continue reading “Object JavaScript – Introduction to Templates in MVVM Using Knockout.js, Mustache”