May 2014 – Page 2

Single Page App – Finding Items in JSON Using Underscore or LoDash

May 9, 2014

Underscore is a utility-belt library for JavaScript that provides a lot of the functions and programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.

Underscore provides 80-odd functions that help you deal with collections, arrays, functions, objects, and more.

You will want Underscore for you non-DOM code or even complex front end code, such as MVC. You can use map, select, invoke or specialized helpers: function binding, JavaScript templating, deep equality testing. Underscore uses built-in functions in modern browsers when you want to use forEach, map, reduce, filter, every, some and indexOf.

Underscore gives you simple templating, too, similar to what you learned about in Object JavaScript – External Templates Using Mustache, jQuery.

You can use Underscore in your Web application or on Node.js.

When minified and GZipped it weighs in at less than 4Kb. Where possible it delegates functionality to native browser implementations for performance. It has no other dependencies and so adds very little overhead to your total script assets. It can be used on the client or server.

In this post, you’ll learn how to use Underscore for finding items in your single page app. You’ll learn how to:

Select a group of toys based on price cutoff.
Find a toy from its name.
Get a sorted list of unique categories.
Sort the list of product names.

In a later post, you’ll learn how to create a list of search terms and respond to a search request using JavaScript and Underscore.

Continue reading “Single Page App – Finding Items in JSON Using Underscore or LoDash”

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 – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser

May 2, 2014

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.

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