Tag: Knockout

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

July 7, 2014

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”

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

June 2, 2014

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 – Store Your Data Locally in Knockout Using AmplifyJS”

Object JavaScript – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser

May 2, 2014

knockoutIn 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 – Introduction to Templates in MVVM Using Knockout.js, Mustache

April 29, 2014

knockoutYou 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

knockoutIn 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

knockoutIn 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 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

knockoutIn 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:

  • Synchronize JSON models with HTML elements using Observable Properties.
  • Synchronize arrays, using Observable Arrays.
  • Provide calculated properties using Computed Properties.

Continue reading “Object JavaScript – Dynamic UI Using Observables with MVVM Using Knockout.js”