Binding to a derived property does not update the DOM when the derived value changes about ampersand-dom-bindings HOT 11 CLOSED

Hey @dw2, try this for you me.js model:

    props: {
        id: ['string'],
        email: ['string', true, '']
    },
    derived: {
        loggedIn: {
            deps: ['email'],
            fn: function () {
                return !!$.trim(this.email);
            }
        }
    }

Since email is already part of the model, it can be used as a dep (and accessed via this.email in the fn) which will tell the model to trigger a change in loggedIn if email changes.

Also using a toggle binding might work better for your case in main.js:

    bindings: {
        'model.loggedIn': {
            type: 'toggle',
            yes: '[data-hook=nav-logout]',
            no: '[data-hook=nav-login]'
        }
    }

from ampersand-dom-bindings.

Thanks for the quick follow up, Luke.

1. Adding deps: ['email'] did work in this test example, however if the dependency was another derived prop then it would still not work. In my real life app scenario, it checks to see if app.me.session is set, which is another derived prop based on a cookie value.
2. Changing the binding type to toggle worked perfectly. I think the issue might be isolated to the switch. Actually no, this doesn't work either. I spoke too soon as I hadn't reset the server.

from ampersand-dom-bindings.

I'm wondering if session won't work as the name for a derived prop since ampersand-state already uses session as the name for non-serialized properties. Does that part work if you change the name to something else?

from ampersand-dom-bindings.

I changed the prop and cookie to be sessionId instead of session. I was hopeful that would resolve the issue, but no luck.

from ampersand-dom-bindings.

I also update me.id whenever the user logs in, so I tried adding deps: ['id'] and that does update the DOM because id is a normal prop. This looks as though it's isolated only to derived props.

from ampersand-dom-bindings.

What might be happening is your other derived prop might not be getting triggered when it changes. Unless it has deps that are changing, it probably wont get triggered properly. If you have a more complete version of the code that you could post to a gist I'd be happy to take a look and try and tweak it to get it working.

from ampersand-dom-bindings.

Thanks! Here's that gist

from ampersand-dom-bindings.

@dw2, I think that app.me.sessionId at https://gist.github.com/dw2/59ce6fe559c04b2fdf3f#file-gistfile1-txt-L45 should likely be this.sessionId, if I'm reading the code correctly.

I assume that this.model in the main view is an instance of the me model, correct?

from ampersand-dom-bindings.

From looking at the code, you should always have an id and the sessionId cookie set at the same time.

I would make loggedIn entirely based around id since that is what the model is actually managing and will automatically track changes to it.

from ampersand-dom-bindings.

@dw2 Sorry that I never got a chance to look at this yesterday. After looking at the code @aaronmccall is right. You can't bind to loggedIn or sessionId in the code because neither of them have deps so there are no events that will trigger them as changed, which is a requirement to bind to them.

from ampersand-dom-bindings.

@aaronmccall thanks for the tip. The reason I was looking at sessionId instead of id is due to the headers that get set in base.js. My API requires sessionId to be sent with each request so that it can validate the user's session in the API database. Using id works, and I understand your reasoning.

@aaronmccall and @lukekarrys both thank so much for your help. I think I understand how this works a little bit better now.

My apologies for creating the Github issue for a non-buggy thing. Cheers!

from ampersand-dom-bindings.