2 computed properties based on the same dependency fire only once - ember.js

Question

Having 2 computed properties based on the same dependency only one computed property runs. The docs says that it is cached what about a situation when I'd like to have the following:
foo: (->
console.log 'foo'
).property('dependency')
bar: (->
console.log 'bar'
).property('dependency')
Now the bar isn't called and I have to resort to observer. Can I make it work?
Edit
The question is about computed properties but it wasn't reflected in the example code - instead of property I used observes. It is now changed. Sorry for confusion.
Edit#2
I modified the great example by #MilkyWayJoe so that it now looks like my solution. Unfortunately (or fortunately) it works, but my solution didn't. Here's the gist what I was after:
With the help of a slider I could set a balance value to be transferred to another credit card provider. Let's say that the value is transferValue. Whenever it changed I had to calculate the annual interest to which the transfer fee was added.
So for example let's say that in my current credit card I have $1000 and the annual interest rate is 19%. It's way too much so I look for another, cheaper solution. It turns out that Bank X offers Balance Transfer Credit Card Y which interest rate is 10% + 3.5% transfer fee.
OK. So I set $1000 on the slider and here goes the magic. I want to calculate interest rate and transfer fee whenever the value changes.
In the modified example it works: http://jsfiddle.net/gqSMU/2/
but failed to do so in my first solution. It was kind of this one:
cardInterest: (->
apr = #get 'purchaseRate'
amount = #get 'transferValue'
#get('calculatedTransferFee') + #calculateInterest apr, amount
).property('transferValue', 'calculatedTransferFee')
As you can see it accesses calculatedTransferFee. The problem was that the value wasn't recalculated. I'm not sure it is worth of mentioning but in the first solution only cardInterest was requested by Handlebars template.
And this is my current solution with observer:
calculatedTransferFee: 0
transferValueDidChange: (->
if #get('isCurrentCardChosen')
transferFee = parseFloat #get('balanceTransferRate') / 100
transferValue = #get 'transferValue'
calculatedTransferFee = if isNaN(transferFee) then 0 else transferFee * transferValue
#set 'calculatedTransferFee', calculatedTransferFee
).observes('transferValue')
It isn't a nice solution, is it? That's why I thought it may be a better solution than to resort to an observer.
I hope that now it is clearer. I'd be grateful for any further feedback!

Answer 1

Not quite sure if I understand what you're trying to achieve since you're talking about property but your code is using observes (I realize this is a conceptual sample code, just not sure where you're going).
Usually, property will be a "reactive accessor" to a value, and 99.9% of the time you want it to be cached (it is by default, unless you say .property('whatever').volatile()), while observe will fire a function when whatever property it is watching changes. If you just want to have two properties firing for the same dependency you could:
App.SomeModel = Em.Object.extend({
someDependency: true,
foo: function() {
// all that's in here will fire only once when 'dependency' changes, and store
// the returning value in cache, and every time something reads this property,
// it will retrieve the cached value.
// A way to test this, is to run the following from your View:
// "alert(this.controller.get('content.foo'));"
// It will alert the string but will not log "whatever bro" again.
console.log('whatever bro');
return "this.foo %# a dependency".fmt(this.get('someDependency') ? "has" : "doesn't have");
}.property('someDependency'),
bar: function() {
// same as above
console.log('whatever dude');
return "this.bar %# a dependency".fmt(this.get('someDependency') ? "has" : "doesn't have");
}.property('someDependency'),
nope: function() {
// same as above, except this is volatile
// and will fire the console.log every time
console.log('y\'all need science');
return "this.nope %# a dependency".fmt(this.get('someDependency') ? "has" : "doesn't have");
}.property('someDependency').volatile()
});
(see fiddle)
If you need it to be logged everytime (perhaps for debugging or whatever reason), you could use volatile or observes.
If I'm tripping and this's not what you want, perhaps you could rephrase your question or refresh the sample code to something closer to your real-life scenario to clarify what's being asked.