I have a state object which has a property session, this property can either be an object or null.

I don't want to have to dirty-check for the isSessionActive() getter, so I'd like to use putedFrom(). However, puterFrom() doesn't seem to fire when this object changes, unless it was undefined previously.

Can I do this without a dedicated isSessionActive boolean property on my state Store?

@autoinject
export class Home {
    firstName: string = "user";
    private state: State;

    constructor(private store: Store) {
       store.state.subscribe(
            response => this.state = response
       )
    }

    @putedFrom('state.activeSession')
    get isSessionActive() {
        return this.state.activeSession !== null;
    }
}

I have a state object which has a property session, this property can either be an object or null.

I don't want to have to dirty-check for the isSessionActive() getter, so I'd like to use putedFrom(). However, puterFrom() doesn't seem to fire when this object changes, unless it was undefined previously.

Can I do this without a dedicated isSessionActive boolean property on my state Store?

@autoinject
export class Home {
    firstName: string = "user";
    private state: State;

    constructor(private store: Store) {
       store.state.subscribe(
            response => this.state = response
       )
    }

    @putedFrom('state.activeSession')
    get isSessionActive() {
        return this.state.activeSession !== null;
    }
}

• javascript
• typescript
• aurelia

• Maybe this could be helpful stackoverflow./questions/28419242/… – Daniel Bejan Commented Aug 12, 2017 at 23:51
• I've already subscribed to my store's state. I could trivially fire a callback event and update the getter manually, but it wasn't as clean. – Fedoranimus Commented Aug 12, 2017 at 23:54
• I think you should set state.activeSession instead of replacing the object with this.state = response. – jmvtrinidad Commented Aug 14, 2017 at 2:42
• What you have should work, but it's only going to call the getter if state.activeSession changes, not if state.activeSession.foo changes. It only is going to notice when the entire object gets swapped out, not when a property on the object changes. – Ashley Grant Commented Aug 14, 2017 at 21:21
• Right, that's what I'm seeing @AshleyGrant and what I have observed elsewhere with @observable and @putedFrom. This is disappointing. – Fedoranimus Commented Aug 14, 2017 at 21:24

2 Answers 2

I can see that you have already solved your problem but it is rather a workaround than an actual solution. Therefore I'd like to e up with some explanation as to why you experience this and how to solve it. Basically, your question is pretty much a different case of the same problem described here.

I've provided a detailed explanation in the ment section as there was a guess-answer, so I'm going to repeat myself here.

The important bits of code are these:

private state: State;

// ...

@putedFrom('state.activeSession')

Like I already explained here, the way Aurelia change detection works is that when Aurelia gets involved in observing some value, it sets up custom getters and setters in place of the respective field or property. Basically, what the setter does is it calls the original property setter (or sets the original backing field) and then notifies any interested parties (i.e., whatever binds to that property) that the value has changed.

Never mind if that does not make sense to you, all that matters is that whenever you bind to something, that something has to be in place before the binding is set up. Like explained in the ment section of the linked answer, if you write this:

private state: State;

this is just a hint to TypeScript that state is semantically correct on the defining class. In other words, since you don't set it to anything, it is left out of the transpiled JavaScript code altogether - all it does is it makes the usage of state valid in TypeScript.

For example, if you did this:

class A {
  x: number;
}

then the resulting JavaScript would be something like:

function A() {
}

Notice that there is no this.x! However, if you wrote this instead:

class B {
  x: number = undefined; // or null, or whatever you like
}

then the resulting JavaScript would be:

function B() {
  this.x = undefined;
}

The difference between the two is that in the first case, there is no property to bind to. Because of that, Aurelia has no way of subscribing to it because it has no way of knowing when (in JavaScript) that property starts to exist on the object. It is important to note here that, if you inspected the value in the console like so:

var a = new A();
var b = new B();
console.log(a.x); // undefined
console.log(b.x); // undefined

Both a.x and b.x seem to be undefined. But they are different: a.x is undefined because it does not exists on a, while b.x is undefined because it is explicitly assigned a value of undefined - so it does exist, it just happens to have a value of undefined. The latter scenario does enable Aurelia to set up its custom logic on the properties while the former does not.

In summary, to make your puted property work, all you need to do is assign a default value (eg. undefined, null) to all the properties which are involved in its putation. It is a good practice anyway.

I ended up just doing the following:

isSessionActive: boolean = false;

constructor(private store: Store) {
    store.state.subscribe(
        response => { 
            this.state = response;
            this.isSessionActive = response.activeSession !== null;
        }
    )
}