0
votes

Just started learning ember.js, and currently working on the TODO MVC from their guide. I'm currently at this step: http://emberjs.com/guides/getting-started/show-when-all-todos-are-complete/

I noticed if I hook the "checked" property to a computed property, the two-way binding doesn't work as I would've expected. That computed property won't update the value if I check/uncheck the checkbox manually.

Here is the simplified example (as if their examples aren't simple enough):

Here is the handlebar code. I only added '{{allAreDone}}' element just to be able to see the value real time:

//...
<section id="main">
    {{outlet}}
    {{input type="checkbox" id="toggle-all" checked=allAreDone}} 
    {{allAreDone}}
</section>
//...

Here is the js snippet for the controller, but I simplified it such that it's not based on another property:

// ... 
allAreDone: function(key, value) {
    return false
}.property()
// ... 

Now, if I check the box (i.e. property 'checked' = true), 'allAreDone' will still show false. The result will be different if the input type is text. Two way binding checkbox will also work if it's linked to a non-computed property such as:

// ... 
allAreDone: false
//will return false if I uncheked the checkbox directly and vice versa
// ... 

I just want to confirm my understanding of the behavior is correct. And why would it be different from type 'text'.

Thanks!

1

1 Answers

0
votes

Your computed property definition is read-only. There’s no way to set the value, only get it. Adapting the example from the guides to your situation:

allAreDone: function(key, value) {
  // setter
  if (arguments.length > 1) {
    this.set('_allAreDone', value);
  }

  // getter
  return this.get('_allAreDone');
}.property('_allAreDone'),

_allAreDone: false

This uses an internal property to store the actual value, but something more problem-specific surely applies.