Getting Started – Page 4

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

May 11, 2014

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.

Continue reading “Single Page App – HTML Templates With Logic Using Underscore, LoDash”

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”

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”

Object JavaScript – Using Infuser to Asynchronously Load Your Templates

April 30, 2014

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 .

Continue reading “Object JavaScript – Using Infuser to Asynchronously Load Your Templates”

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”

Object JavaScript – Dynamic UI With MVVM Using ObservableArray in Knockout.js

April 27, 2014

In our previous post Dynamic UI Using Observables with MVVM Using Knockout.js, you learned how you get started with Knockout.js and how you can detect and respond to changes on one object using observables.

Knockout.js simplifies JavaScript UI by applying the Model-View-ViewModel pattern.

Now if you want to detect and respond to changes of a collection of things, you can use an observableArray. An observableArray tracks which objects are in the array, not the state of those objects.

An observableArray tracks which objects it holds, and notifies listeners when objects are added or removed.

You can make the items themselves observable if you wish, but we’ll start with a basic observableArray.

Continue reading “Object JavaScript – Dynamic UI With MVVM Using ObservableArray in Knockout.js”

Object JavaScript – Bindings With MVVM in Knockout.js

April 26, 2014

Knockout provides ways to bind the data you specify in the data-bind attribute to the element. You can apply bindings to the text and appearance, use them in the logic you use to display items, and working with form fields.

In addition, you can create your own custom bindings.

Let’s see how.

Continue reading “Object JavaScript – Bindings With MVVM in Knockout.js”

Object JavaScript – Dynamic UI Using Observables with MVVM Using Knockout.js

April 25, 2014

In our previous posts, you learned how to build modules. In the next series of posts, you will learn how you can connect up modules to the user interface. You will learn, step by step how to use observables for your user interface to dynamically update itself.

Knockout.js makes it easier to create rich, responsive UIs with JavaScript. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainable.

Knockout helps you build rich client-side interactivity by using an MVVM-like (Model, View, and ViewModel) pattern. It does this by helping you separate the UI behavior and the data structures. To do this, you will use declarative bindings with observable data.

Knockout is free, open source, and available for your projects using the MIT License.

Knockout helps you: