Mustache – AzureDays

Single Page Apps – Deep Dive into Loading Templates Using Sammy, Mustache, RequireJS

May 25, 2014

Sammy.js In this tutorial you will learn how Sammy renders a Mustache template and then load and interpolate the template. In addition, you will use Sammy and templates as Asynchronous Module Definition (AMD) modules.

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.

Continue reading “Single Page Apps – Deep Dive into Loading Templates Using Sammy, Mustache, RequireJS”

Single Page Apps – Displaying Data Using Sammy Plugins Using Mustache

May 21, 2014

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.

Continue reading “Single Page Apps – Displaying Data Using Sammy Plugins Using Mustache”

Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache

May 8, 2014

In the previous posts on promises Promises for Asynchronous Operations Using jQuery, you learned how you can build promises using jQuery Deferreds and Promises. And in External Templates Using Mustache, jQuery, you learned how to bring in an external template.

It is time to show a real life example of how this code comes together. And in doing so, we have the beginning for a Single Page App.

In this code example, you will see how to use jQuery Promises to:

Load some JSON data
Load a Mustache template
Build your own deferred object for your own long-running function

Then when all three are accomplished, you’ll use the jQuery $.when() function to render the data.

For this example, you will need to have jQuery and Mustache loaded in your Scripts folder. Continue reading “Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache”

Object JavaScript – External Templates Using Mustache, jQuery

May 7, 2014

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.

Continue reading “Object JavaScript – External Templates Using Mustache, jQuery”

Object JavaScript – Templates Rendering JSON Using Mustache, jQuery

May 5, 2014

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.

Continue reading “Object JavaScript – Templates Rendering JSON Using Mustache, jQuery”

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

April 29, 2014

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.

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