CODEWITHSUNDEEP
ember.js
kfir124
kfir124

Reputation: 1306

Emberjs one way & two way bindings?

Lets say I want that my page's title will change depending on a really simple field what is the Ember way of doing it?

I didn't really understand the bindings in Ember, do I have to create an object even if all I need is just 1 field?

Does Ember support two way bindings? if it does so how can I constrain the bindings to one-way only?

I think i'm a bit confused with Ember-data & regular Ember, when I use Ember-data do I need to care about bindings at all?

Thanks in advance :)

Upvotes: 1

Views: 6703

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

This is a little vague (or I just don't fully understand what you're asking), so I'll shotgun approach and we can narrow down as you ask more questions.

Preface: Ember Data is a client side record management library, Ember works completely fine without it.

Title

A page's title is a little tricky since it's kind of out of the scope of the viewable dom, but the best way to handle it would be with an observer. In the example below, as the title property changes inside of my application controller I'm setting the document.title.

App.ApplicationController = Em.Controller.extend({
  title:undefined,
  watchTitle: function(){
    document.title = this.get('title');
  }.observes('title')
  
})

Example: http://emberjs.jsbin.com/haducafu/1

Computed Properties

Ember does support one way bindings (though rarely do you need to care about bindings). More often you want to care about dependent properties. eg if property a has changed, property b should be updated etc. In the case below, b is a computed property that depends on a, if a changed, b is dirty, and ember should re-computed it.

App.ApplicationController = Em.Controller.extend({
  a:'foo',
  b: function(){
    return 'Hello: ' + this.get('a');
  }.property('a')      
})

Example: http://jsbin.com/haducafu/2/edit

Simple Binding

Additionally Ember can do just simple bindings (you can actually skip defining name, since ember would define it the first time it uses it).

App.ApplicationController = Em.Controller.extend({
  name:undefined       
});

<h2>Hello {{name}}</h2>
Name: {{input value=name}}

Example: http://jsbin.com/haducafu/3/edit

One Way/Read Only:

One way will take the value from its host property, unless you set it, if you set it it stops following the dependent property and becomes its own (not modifying the dependent property).

Read only will take values form the host property, and if you try and set it it will blow chunks.

App.ApplicationController = Em.Controller.extend({
  name:'billy',
  oneWay: Em.computed.oneWay('name'),
  readOnly: Em.computed.readOnly('name')
});

Try changing name first, they will all update, then change oneWay and it will diverge and never return, then change readOnly and it will throw errors.

Example: http://jsbin.com/haducafu/4/edit

Upvotes: 11

Related Questions