Object JavaScript – Code Walkthrough Initializing a Module That Needs RequireJS, jQuery, LoDash

image6[1]RequireJS is a JavaScript file and module loader. In Getting Started with Modules Using RequireJS, you have learned a lot about how you can use it to load your dependencies using define() and require().

In this code snippet, you will learn how you can load the dependencies, initialize a module with values that you pass in, and then make public some of the methods.

And you will see how to put files in folders to help keep identify which modules you write in your app and which modules are from third parties.

Continue reading “Object JavaScript – Code Walkthrough Initializing a Module That Needs RequireJS, jQuery, LoDash”

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 “Snippets – Filtering JSON Using jQuery Grep, Filter, Map”

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 App – isLoading jQuery Plugin to Indicate Content Loads”

Snippet – C#, JavaScript, jQuery, Underscore ForEach Loops

10063_580983808600819_401360548_nThe foreach statement repeats a group of embedded statements for each element in an array or an object collection. The foreach statement is used to iterate through the collection to get the information that you want.

It is not be used to add or remove items from the source collection to avoid unpredictable side effects. (If you need to add or remove items from the source collection, use a for loop.)

Continue reading “Snippet – C#, JavaScript, jQuery, Underscore ForEach Loops”

Single Page App – Separate UI from Model Using Publish, Subscribe Pattern using AmplifyJS

image8AmplifyJS is a set of components designed to solve common web application problems with a simplistic API. Amplify’s goal is to simplify all forms of data handling by providing a unified API for various data sources.

Your application may need more sophisticated control than is offered in Knockout, which provides for automatic updates in your view model. Knockout provides the observable pattern. But in the pattern described here Amplify’s publish/subscribe you do the publishing and the subscription.

In this post, you’ll learn the basics of how you can implement publish/subscribe pattern on the client using Amplify.

Continue reading “Single Page App – Separate UI from Model Using Publish, Subscribe Pattern using AmplifyJS”