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