Tagged: JavaScript Libraries

Snippets – Filtering JSON Using jQuery Grep, Filter, Map

6327_image_58FAEDFAWhen you have a JSON array, you may want to get one or more items from the array and display. jQuery offers two functions that can help: grep and filter.

  • $.grep(). Finds the elements of an array which satisfy a filter function. The original array is not affected.
  • $filter(). Reduce the set of matched elements to those that match the selector or pass the function’s test.
  • $.map(). applies a function to each item in the array, thus returning a modified array

In other words, $.grep() removes items from an array as necessary so that all remaining items pass a provided test; .filter() constructs a new jQuery object from a subset of the matching elements.

Also, filter is intended to be used with html elements, and that is why it is a chainable function that returns a jQuery object and it accepts filters like “:even”, “:odd” or “:visible” etc. You can’t do that with the grep function, which is intended to be a utility function for arrays.

Continue reading

Advertisements

Single Page App – isLoading jQuery Plugin to Indicate Content Loads

imageWhen 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.

image

Then once the page is loaded, it will display the data based on an external template.

image

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.

Continue reading

Single Page Apps – Retrieving, Caching Server Requests Using AmplifyJS

image8You may want to use storage to store data. You can save the data your user has entered in a wizard. Or you might want to save data so you can provide an offline experience. Or you may want to store user preferences. Local storage is a good idea anytime you do not want, or need your user or your application to start all over.

AmplifyJS is a very neat library that provides a consistent API to handle client storage that works in most browsers.

In this post, you will learn to retrieve the data through amplify.request without concern for data caching, server interface, resource location, data types, wrappers, and all the other specificities of the client/server interaction.

Requests made through amplify.request will always be resolved asynchronously, even if the resource invokes the callbacks immediately.

You will probably need jQuery for Amplify Request. The default request type shipped with AmplifyJS does utilize jQuery AJAX, but you can just as easily create a new request type that uses Dojo, MooTools, etc.

However the publish/subscribe and store components do not use jQuery at all.

Continue reading

Single Page Apps – Store Your Data Locally in Knockout Using AmplifyJS

image8[3]Amplify store and Knockout can be great partners. For example, you can use client storage to improve user experience, remembering user preferences or previously entered values such that the user doesn’t have to start all over.

There is a tutorial on Knockout that provides for client storage. In the tutorial, Knockout uses Amplify to restore user data when the user revisits the site.

You can augment Knockout observables with additional functionality, by using extenders.

You can use extender to automatically store and restore any observable property. Continue reading

Single Page Apps – Local Data Store with AmplifyJS

imageYou may want to use storage to store data. You can save the data your user has entered in a wizard. Or you might want to save data so you can provide an offline experience. Or you may want to store user preferences. Local storage is a good idea anytime you do not want, or need your user or your application to start all over.

AmplifyJS is a very neat library that provides a consistent API to handle client storage that works in most browsers.

Of course, you can use HTML5 Local Storage. But amplify.store supports IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ and provides a consistent API to handle storage cross-browser.

Note: Because of the JSON dependency, you need to add json2.js for support in browsers without native JSON support, including IE 5, IE 6, IE 7, Firefox 2.0 and Firefox 3.0.

Continue reading

Single Page Apps – Writing a LoDash/Underscore Plugin for SammyJS

Sammy.jsAlthough SammyJS is a router that provides you with file loading of data and templates. You load templates and data using Sammy’s plugins.

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.

Continue reading

Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS

Sammy.jsWhile I was trying out Sammy.js with Require.js I kept getting several errors, among them:

  • jQuery is not defined
  • Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced’ return new jQuery.fn.init( selector, context, rootjQuery ); } has no method ‘sammy’

Here’s a code sample that shows how you can get the two to work together.

Continue reading

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

Sammy.jsIn 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 – Loading JSON Using Sammy

Sammy.jsSingle Page Applications (SPA) are web sites/applications which are consists of single page and provide smooth user experience in contrast with traditional click and refresh web pages. You can integrate data loading along with routing to provide your users with a site or app that “pops”. No waiting, because the data has already been loaded.

We will start with a prototype for a Sammy page, which provides a div whose identifier is main, where we will render the data. And the code to load the scripts.

Continue reading

Single Page Apps – Displaying Data Using Sammy Plugins Using Mustache

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.

Continue reading

Single Page Apps – Single Page Forms Using the Sammy’s EventContext

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.

Continue reading

Single Page Apps – Getting Started with SammyJS – Routes

image[4][3]Single Page Applications (SPA) are web sites/applications which are consists of single page and provide smooth user experience in contrast with traditional click and refresh web pages

Even in the world of high speed broadband internet connections, changing a web page when clicked on a link is not desirable and would certainly be appreciated if possible to avoid. SPA’s provide just that.

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.

You use a route in your URLs that contains #/operation as part of path name. By changing URL to a hash based path #/pathName you avoid page refresh and your page responds to the new user request. It also makes it possible to use browser back/forward button.

Continue reading

Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache

image613As 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.

Continue reading

Single Page App – Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash

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.

Continue reading

Single Page App – HTML Templates With Logic Using Underscore, LoDash

Underscore.jsUnderscore 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.

Continue reading