Re-Learning Backbone.js – Nested Views

Previously in this series we have learned about views and collection. Now lets learn about creating nested views based on a collection.

Most if not all of the concepts learned in the previous Re-Learning Backgone.js tutorials will be used in this blog post. As in previous posts, we will start-off very simple and take very small steps to get to our end goal. The reason to take all these steps is to make sure each addition to our solution works. This will be a 7 part post.

For this post our end goal is to create a very simple list of movies. Each individual movie displayed will be managed by an individual Backbone view. There will be another view that creates and manages the child views. I have bigger plans than this, but first wanted to do something simple.


Continue reading “Re-Learning Backbone.js – Nested Views”

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 – View Render

In this post we learn about different ways to render HTML using Backbone.js view and Underscore templates.

A Backbone view should include a render function. The render function should have the responsibility of manipulating the view’s el property. The el property is then used to update the DOM.

This post builds on the following posts:
Re-Learning Backbone.js – View Basics
Re-Learning Backbone.js – Templates (Underscore)
Re-Learning Backbone.js – Models
 

Here are a couple of quotes about Backbone.js Views:

“Backbone views are almost more convention than they are code — they don’t determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library. The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view’s render function to the model’s “change” event — and now everywhere that model data is displayed in the UI, it is always immediately up to date.” http://backbonejs.org/#View

“At a technical level, a Backbone view is simply a JavaScript object that manages a specific DOM element and its descendants.” http://aaronhardy.com/javascript/javascript-architecture-backbone-js-views/

In this first example we are going to add some text to a DOM div element.


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

Re-Learning Backbone.js – View Basics

There is probably more confusion with Backbone.js Views than with other features of Backbone. In this post I’m going to describe some basic features of Backbone Views. Also, In this post we will not be rendering any HTML, but I believe the concepts that you will learn will provide the bedrock for understanding Views better.

The end goal of a Backbone View is to represents an object in the DOM. Many times a view will be created that will manipulate an object that represents an element that is not originally assigned to the DOM. At some point the view object will be assigned to the DOM element and displayed.

A view usually builds up an element and adds it to the DOM. Here’s an example of what a view represents.

This element would be built by the Backbone view and then added to the DOM.

It’s important to understand that once a view is added to the DOM, the view is still aware of that element in the DOM and can manage that element. So if events occur on the DOM element, such as click or keyUp, the view can be notified of these changes and take action. Also if a view references a model and the model changes, the view can be automatically updated and in-turn the DOM element will be updated to reflect the changes in the model.

“At a technical level, a Backbone view is simply a JavaScript object that manages a specific DOM element and its descendants.” http://aaronhardy.com/javascript/javascript-architecture-backbone-js-views/

“How does Backbone relate to “traditional” MVC?
Different implementations of the Model-View-Controller pattern tend to disagree about the definition of a controller. If it helps any, in Backbone, the View class can also be thought of as a kind of controller, dispatching events that originate from the UI, with the HTML template serving as the true view. We call it a View because it represents a logical chunk of UI, responsible for the contents of a single DOM element.”
http://backbonejs.org/#FAQ-mvc

I don’t want to overwhelm you with a lot of content, so I’m going to take very small step to explain some core features of Backbone views. Even though it’s our end goal, in these examples we will not assign a view to a DOM element. Everything will be logged to the browser console.


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

Understanding Backbone.js – Simple Example

I’m by no means an expert in Backbone.js.  I created this post because I had difficulty understanding backbone, and I hope that the information that I provide will help others grasp Backbone.js a little faster.  This post is directed to individuals who understand the concepts of Backbone.js, but are having a difficult time implementing a simple solution.

This post provides a simple example on Backbone.js Routers, Models and Collections and Views.  I’m going to try to make this example extremely simple. But also show key Backbone.js concepts

I’m probably not the best writer.  It would take me days, if I were to validate all the grammar, spelling and such.  So I’m just going to try to get it done.  Even though the grammar and such may not be perfect, the technical parts of the article should be correct.  I hope you enjoy.

A few months after writting this post, my priorites and technology direction changed. For probably 6 months I did little work with Backbone.js. When I came back to Backbone.js in November, I was a little lost. I had to become familar with the technology once again. I thought it would be a good opportunity to write about Backbone.js basics. Here are posts where I describe the basics of Backbone.js.

This post will be based on a contrived idea of displaying a list of movies at a theater.
Continue reading “Understanding Backbone.js – Simple Example”