Comments (11)
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.
- 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 ifapp.me.session
is set, which is another derived prop based on a cookie value. Changing the binding type toActually no, this doesn't work either. I spoke too soon as I hadn't reset the server.toggle
worked perfectly. I think the issue might be isolated to theswitch
.
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.
Related Issues (20)
- Binding with innerHTML didn't fire script tag HOT 7
- Type: class to support some kind of mapping or parse function HOT 5
- Style properties HOT 8
- Borrow features from Backbone.Epoxy
- "falsy" values for attribute bindings act as true for certain attributes HOT 2
- Custom binding types HOT 5
- class binding should support an array of classes HOT 1
- new binding type: switchAttribute HOT 3
- Visibility binding types
- Changing a property bound to a checked property of a checkbox within an event handler can break.
- Add yes/no support to booleanAttribute HOT 1
- Should use amp-result HOT 2
- Update input value on blur
- pass binding context through to custom binding functions HOT 2
- Attribute `indeterminate` is not correctly toggled HOT 3
- Switch type assumes each cases value to be unique HOT 4
- class attribute via DOM binding to append itself to existing classes and not overwrite all HOT 1
- Only apply bindings if element is not currently focused
- Make bindings extensible HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ampersand-dom-bindings.