Tagged: HTML Templates
Single Page App – isLoading jQuery Plugin to Indicate Content Loads
When you’re loading information using jQuery AJAX, you may want to provide visual feedback when loading data or for any action that would take time.
In this Snippet, you will learn how to:
- Load JSON data from a getJSON call to our server.
- Show and hide a spinning indicator inside a div.
- Bind the incoming data to a view model object.
- Use the view model to populate an external template.
Then once the page is loaded, it will display the data based on an external template.
And we’ll provide some tips on how you you can use the IsLoading library to display the loading indicator on top of the page while loading and on top of the div itself.
Single Page Apps – Writing a LoDash/Underscore Plugin for SammyJS
In this tutorial, you will learn how you can use sammy.load to load JSON data, and then use LoDash (or Underscore) to _.find() to retrieve the item based on the value provided in the sammy route. And you will combine the template and data using a custom Sammy plugin.
Why LoDash?
LoDash or Underscore provide great methods for working with collections and arrays. There are subtle differences in these two libraries. But for this tutorial, they provide the same functionality.
Use these libraries to “slice and dice” your data. In the case of this tutorial, you will use _.find(). In your real life applications, there will be more complex ways of manipulating your data, that LoDash can provide.
LoDash includes _.template(). The template method compiles a set of HTML code and turns it into JavaScript. The templates can include _ and complex JavaScript functions.
Single Page Apps – Deep Dive into Loading Templates Using Sammy, Mustache, RequireJS
The tutorial builds on the previous postings Getting Started with SammyJS – Routes, where you learned you can use Sammy to provide client side routing, and Loading JSON Using Sammy where you learned how to load JSON data using sammy.load().
This tutorial goes beyond the getting started with Sammy tutorial, JSON Store, provided in Sammy’s documentation. In this tutorial you will learn what happens behind the scenes with each of the important calls. The idea is to help you choose the right Sammy calls as your application gets more complex.
Single Page Apps – Displaying Data Using Sammy Plugins Using Mustache
![image[4][5]](https://devdaysdotcom.files.wordpress.com/2014/12/image451.png?w=244&h=106 "image[4][5]")
Sammy.js has a lot more to offer than simply defining routes in the app. More advanced users can explore custom events and namespaces, for event-driven applications.
Sammy’s author Aaron and others provide additional functionality for your application. In this tutorial, you’ll get a summary of plugins that are available for Sammy, and then we’ll dive into a few that are important in building our single page applications.
In this post, you will build a single page application that receives JSON data, displays the data in various ways using templates, and stores the data to provide an off line experience. You will use the following plug-ins:
- Sammy.Mustache. Provides a quick way of using mustache style templates in your app.
Single Page Apps – Single Page Forms Using the Sammy’s EventContext
![image[4]](https://devdaysdotcom.files.wordpress.com/2014/12/image47.png?w=244&h=106 "image[4]")
Let’s expand on the previous post Single Page Apps – Getting Started with SammyJS – Routes and create a form using Sammy.js. Instead of adding HTML inline, we can use an external template. And because the data for the input form is contained on a single page, we can display the data on what appears to the user to be another page, after the user submits the form.
Sammy.js helps you create RESTful evented JavaScript single page applications. You can maintain the state of your app with the URL without having to refresh or change the page.
This topic introduces how you can use Sammy.EventContext object. The Sammy.EventContext is created every time a route is run or a bound event is triggered. The callbacks for these events are evaluated within a Sammy.EventContext.
Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache
As you learned in the previous post, you learned how you can load templates inline in your app using RequireJS. The next step is to load and compile a template file. And for your offline app, learn how you can cache templates. Caching saves a round trip to the server, making your application incredibly responsive.
In this tutorial we will compile, load, and cache LoDash (or Underscore) templates and then use those templates to transform data in our single page app.
The technique uses RequireJS, so there is no more dynamic loading. Templates are bundled within your code which saves some HTTP requests.
Single Page App – Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash
![image6[1]](https://devdaysdotcom.files.wordpress.com/2014/12/image611.png?w=126&h=124 "image6[1]")
In the previous post, you learned how you can use RequireJS in projects to define your own loading order, and how to build your own modules.
This tutorial go into depth on how to use RequireJS for AMD (Asynchronous Module Definition) modules. You will write we can write our own modules and load them with RequireJS.
In this tutorial you will build a small app that uses LoDash and jQuery. If you want to use Underscore, just substitute Underscore for the LoDash references.
Although you can use a bunch of <script> tags to load the libraries, your page is blocked during the load. And you could minify them and maintain the order in your own code. But with RequireJS, you include the RequireJS source and let it load the files.
Single Page App – HTML Templates With Logic Using Underscore, LoDash
Underscore complement to JavaScript’s standard library. And it also gives you simple templating.
The Underscore template function compiles JavaScript templates into functions that can be evaluated for rendering. Template functions can both interpolate variables or execute arbitrary JavaScript code. That allows you to put more logic than you can with Mustache.
Comparison to Mustache, Handlebars
Mustache and Handlebars are what are known as “logic-less template engines.” With those libraries you cannot include any overly complex logic in the template. You get the most basic control structures needed to output data, keeping the HTML (or other content) clean.
Underscore is different. It’s a JavaScript library in itself, like Prototype or jQuery, and comes with it’s own templating engine. The templates have access to any method or helpers within the library, meaning the templates are strictly tied to JavaScript and house a lot more of the logic.
Object JavaScript – External Templates Using Mustache, jQuery
As you have seen in Templates Rendering JSON Using Mustache, jQuery, you can put reusable HTML into a template and then have that template render your data. You are separating the data and providing one or more ways it can be displayed inside of a page.
This post extends what you have learned about Mustache and gives an example on how you can put your template into an external file. Once in an external file, you can use it across your site whenever you need data displayed in a particular way.
Object JavaScript – Templates Rendering JSON Using Mustache, jQuery
In our previous posts, you see how you can create templates and load them asynchronously using Knockout. But not everyone needs Knockout’s functionality. Maybe you just want to get some data and display it using a template.
Mustache is a library that allows you to read in JSON formatted data and display it using templates you design.
Mustache can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.
If you know JSON and a bit of JavaScript, you can implement Mustache. It is available for Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and for node.js.
In this tutorial, you’ll learn how to use Mustache with JavaScript to create HTML page.
Mustache is logic-less because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
Mustache provides the same functionality to libraries like underscore.js, handlebars.js, and dust.js.
Object JavaScript – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser
In 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.
Object JavaScript – Using Infuser to Asynchronously Load Your Templates
In 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 .
Object JavaScript – Introduction to Templates in MVVM Using Knockout.js, Mustache
You 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.
DevDays® 