Ember computed property on a controller not bound in template

Question

I'm trying to implement a password strength checker that will update on every key press. My template looks like this:

{{input type="password" id="password" value=password }}

My controller looks like this:

App.SignupController = Ember.Controller.extend
  passwordStrength: ((key,val) ->
    # check strength if val is defined
    return
  ).property('password')

passwordStrength is never called when text is entered in the field.

However , if I rename the method to just password and remove the computed property's name, it does work:

App.SignupController = Ember.Controller.extend
  password: ((key,val) ->
    # check strength if val is defined
    return
  ).property()

I'd rather understand why the former was not working though, and use a more sensibly named method too.

Answer 1

I've created a jsbin for you to look at that is working and updating when the password is updated. I think I know why this is not working for you. in my js bin here http://emberjs.jsbin.com/gekofo/4/edit?html,js,console,output You will notice that only the observer console.logs. Whereas in your program I would imagine you maybe aren't displaying the passwordStrength value. If you add {{passwordStrength}} into the template in my bin, you will see that the property gets updated. So it looks like you may want to use the passwordStrength2 that i have written, because it will update whether it is displayed in the DOM or not.

In short use this:

passwordStrength2: function() {
   //check strength if val is defined
   console.log("OBSERVER::", this.get('password.length'))
   return this.get('password.length');
}.observes('password')

NOT:

passwordStrength: function() {
  //check strength if val is defined
  console.log("PROPERTY::", this.get('password.length'))
  return this.get('password.length');
}.property('password')

Also I do not know coffeescript, so sorry my answer is in javascript.