Giter VIP home page Giter VIP logo

Comments (11)

lukekarrys avatar lukekarrys commented on June 16, 2024

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.

dw2 avatar dw2 commented on June 16, 2024

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.

lukekarrys avatar lukekarrys commented on June 16, 2024

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.

dw2 avatar dw2 commented on June 16, 2024

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.

dw2 avatar dw2 commented on June 16, 2024

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.

lukekarrys avatar lukekarrys commented on June 16, 2024

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.

dw2 avatar dw2 commented on June 16, 2024

Thanks! Here's that gist

from ampersand-dom-bindings.

aaronmccall avatar aaronmccall commented on June 16, 2024

@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.

aaronmccall avatar aaronmccall commented on June 16, 2024

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.

lukekarrys avatar lukekarrys commented on June 16, 2024

@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.

dw2 avatar dw2 commented on June 16, 2024

@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.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.