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

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

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

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”