Dependency inference not working in one specific case

[jembezmamy]

Hello, dependency inference doesn't work for me in this code:

EmberScript:

style: ~>
    CSSEncoder.encode
      width: "#{@controller.width*100}%"
      height: "#{@controller.height*100}%"
      left: "#{@controller.left*100}%"
      top: "#{@controller.top*100}%"

JavaScript:

style: Ember.computed(function () {
    return CSSEncoder.encode({
      width: '' + get$(get$(this, 'controller'), 'width') * 100 + '%',
      height: '' + get$(get$(this, 'controller'), 'height') * 100 + '%',
      left: '' + get$(get$(this, 'controller'), 'left') * 100 + '%',
      top: '' + get$(get$(this, 'controller'), 'top') * 100 + '%'
    });
  }).property()

And it works, when I modify the code like this:

EmberScript:

style: ~>
    css = 
      width: "#{@controller.width*100}%"
      height: "#{@controller.height*100}%"
      left: "#{@controller.left*100}%"
      top: "#{@controller.top*100}%"
    CSSEncoder.encode css

JavaScript:

style: Ember.computed(function () {
    var css;
    css = {
      width: '' + get$(get$(this, 'controller'), 'width') * 100 + '%',
      height: '' + get$(get$(this, 'controller'), 'height') * 100 + '%',
      left: '' + get$(get$(this, 'controller'), 'left') * 100 + '%',
      top: '' + get$(get$(this, 'controller'), 'top') * 100 + '%'
    };
    return CSSEncoder.encode(css);
  }).property('controller.width', 'controller.height', 'controller.left', 'controller.top')

Cheers!