Working with bindings

Most frameworks include some sort of binding implementation. Ember is no exception and has bindings that can be used with any object. The following recipes explain how to use them as well as one-way and two-way binding.

How to do it...

In this example, there is a teacher and student Ember object. Each has its own set of properties and they both have homeroom. We can share the homeroom by setting an alias for the teacher object.

1. Let's begin by creating a teacher and student Ember.Object:

   const Teacher = Ember.Object.extend({
     homeroom: '',
     age: '',
     gradeTeaching: ''
   });
   
   const Student = Ember.Object.extend({
     homeroom: Ember.computed.alias('teacher.homeroom'),
     age: '',
     grade: '',
     teacher: null
   });

   The student homeroom is Ember.computed.alias, which will bind the homeroom property to teacher.homeroom.

2. Next, we'll instantiate the teacher and student objects:

   const avery = Teacher.create({
     age: '27',
     homeroom: '1075',
     gradeTeaching: 'sophmore'
   });
   
   const joey = student.create({
     age: '16',
     grade: 'sophmore',
     teacher: avery
   });

   The joey object has the homeroom property set to avery, which is the teacher object that we just created.

3. We can now use console.log to output our findings:

   console.log(joey.get('age')); //16
   console.log(avery.get('homeroom')); //1075
   avery.set('homeroom','2423');
   console.log(joey.get('homeroom')); //2423

   As you can see, whenever the avery object changes its homeroom, the student joey homeroom changes as well. This is because the homeroom for joey is an alias for the teacher, avery.

4. You do not always have to access properties that reference other objects. You can bind to anything:

   const myName = Ember.Object.extend({
     name: 'Erik Hanchett',
     otherName: Ember.computed.alias('name')
   });
   
   const erik = myName.create();
   
   console.log(erik.get('name')); //Erik Hanchett
   console.log(erik.get('otherName')); //Erik Hanchett

   The alias points to name; therefore, when printing to the console, it shows Erik Hanchett for both.

   Note

   Ember has a class called Ember.Binding. This is a public class that has very similar behavior and functionality as Ember.computed.alias and Ember.computed.oneWay. You should use Ember.computed.alias and not Ember.Binding. Computed aliases are the preferred method of binding in Ember. Ember.Binding is still around and will probably be deprecated at some point.

One-way binding

Ember defaults to something called two-way binding. What this means is that when properties are changed in the UI, this is updated back in the controller or component. On the other hand, one-way binding propagates changes in one direction only.

For instance, let's say that we have a User object with a firstName, lastName, and nickName property. We can use Ember.computed.oneWay to create a one-way binding for the firstName property.

Let's see what happens when we try to make a change to it. Create a new user object with these properties. Instantiate the object and try changing the properties:

const User = Ember.Object.extend({
  firstName: null,
  lastName: null,
  nickName: Ember.computed.oneWay('firstName')
});

const user = User.create({
  firstName: 'Erik',
  lastName:  'Hanchett'
});

console.log(user.get('nickName'));              // 'Erik'
user.set('nickName', 'Bravo'); // 'Bravo'
console.log(user.get('firstName'));             // 'Erik'

You can see that nickName does not change even though user has been updated. You can think of one-way binding like using Ember.computed.alias. However, it allows you to get values only and not set them. The upstream properties don't get changed when using Ember.computed.oneWay.

How it works...

Ember bindings are used in many parts of the Ember framework. They are derived from the Ember.computed namespace. In this namespace is the computed alias method. A computed alias specifies the path to another object by creating a two-way binding.

Binding objects don't update immediately. Ember waits until all the application code has finished running before synchronizing all the changes. This prevents unneeded overhead of syncing bindings when values are being updated.

One-way binding works by information being propagated only one way. Information does not get updated in the upstream properties.