Re-Learning Backbone.js – Collections

Backbone.js collections are used to store and manage a group of similar or related objects. If all we wanted to do was store related objects we could use a JavaScript array, but Backbone.js Collection provides an infrastructure that allows us to manage the set of data more effectively and efficiently.

As usual, I will attempt to keep the sample very simple. We will focus on collections, but we will need the assistance of models in this example.

In the following example we are creating 2 models and adding them to a collection.

In the first section of the code we declare a Movie model class. There’s nothing special here.
Continue reading “Re-Learning Backbone.js – Collections”

Re-Learning Backbone.js – View Events

It is common for Backbone.js views to include elements that the user can interact with. For example, the user can enter text in a text box, hover over a div, or click a button. These types of interaction can trigger events. If a Backbone.js view is bound to these events, then the view can react to these events. Reaction to these events could be validating data, displaying a message box, or saving or updating data in the model.

While we learning about Backbone.js view events, we will keep it very simple. In the following example we will not have templates or models, we will be working with a very simple view. In this example we will bind an input textbox key-up event to a view’s function. Whenever the user presses a key, an event should be triggered and a function should be called to log the value of the textbox to the browser console.


Continue reading “Re-Learning Backbone.js – View Events”

Re-Learning Backbone.js – Binding Models to Views

In the previous post we learned about Model Binding in isolation. There are many places where model binding can provide benefit. Where we see model binding the most is in relation to using views. Usually we want the view to depict those changes in the model. In this post we will bind a model to a view.

In the following example the view will be updated when the model changes.


Continue reading “Re-Learning Backbone.js – Binding Models to Views”

Re-Learning Backbone.js – Model Binding Events

Usually a view tracks a model, and when the data in the model changes the view is updated to represent the changes. In the previous two blog posts we learned about Bakbone.js Views, but our views did not track models and were not update when the model changed.

In this post we will learn the basics about binding models events. I do not want to overly complicate the situation, so we are going to learn about Backbone.js Model Binding Events in isolation. We will not be using views in these examples, but the knowledge we do gain here will be applied in the next blog post about views monitoring changes in models

In this example whenever the model’s data changes, the function movieChanged will be called.


Continue reading “Re-Learning Backbone.js – Model Binding Events”