Comments (10)
@kevindente I can see the use for this. Any ideas on how this could be configured in the api?
Possibly toggle
(best thing that came to my mind):
// Configuration for model attributes that contain truthy values.
'#header': {
modelAttr: 'header',
toggle: true
}
// Overloaded with a callback, which should return a truthy value to toggle.
'#header': {
modelAttr: 'header',
toggle: function(modelVal, elVal, attrName) { return true; }
}
from backbone.stickit.
Hmm, I'm not totally sure what "toggle" represents in your sample. Does that equate to "visible"? And does the value determining visibility come from the modelAttr header in that case (ie model.get('header') == true means visible, model.get('header') == false means invisible)? Or is visibility determined solely by the function return value, and independent of the property value?
Actually, I'm unclear on this for readonly property as well (which I assume this is modeled after). The {param: true} setup is a tad confusing.
from backbone.stickit.
model.get('header') == true means visible
Yeah, that is what I was going for in the first configuration style. When toggle
is true, then toggling would be turned on for the element based on the model attribute's boolean value. Maybe toggle isn't the best name (?).
Or is visibility determined solely by the function return value, and independent of the property value?
The second example configuration is an overloaded value type for when the model attribute does not have a boolean value. In that case, when the model attribute is changed, the callback return value, true or false, will dictate whether it is shown or hidden.
Make sense? Any suggestions/changes?
FYI, readonly
has been deprecated from the api (on master) - element properties can now be bound in the attributes
configuration.
from backbone.stickit.
OK, makes sense. I agree that toggle isn't the best name. It makes sense from a jQuery perspective, but isn't that obvious when you just read the bindings. Perhaps just "visible" would be better.
BTW is there a way you'd be able to inject a transition animation into the showing and hiding (like making it collapse up instead of just disappearing)?
from backbone.stickit.
@kevindente Starting to look into this now. I've settled on visible
.
What were your ideas for injecting a transition animation? The cleanest and most flexible solution is to supply an extra callback which passes back the $el
, which the user can use to manually animate a transition, but I'm not sure if that is a big win. Something like the following:
bindings: {
'#header': {
modelAttr: 'header',
visible: true,
visibleFn: 'fadeFast'
}
},
fadeFast: function($el, attrVal, attrName) {
if (attrVal) $el.fadeIn('fast');
else $el.fadeOut('fast');
}
from backbone.stickit.
Hmm, maybe supporting arbitrary transitions is more than this needs. Seems like there isn't much difference between your visibleFn example and the afterUpdate function, and providing 2 ways to do the same thing probably doesn't make sense.
What about just providing a path for passing through the standard parameters to jQuery's toggle/show/hide functions - duration, easing, and maybe callback?
from backbone.stickit.
The visibleFn
would be necessary in this case because visible
is a special binding that does not actually update the dom value, just toggles it, right?
The problem with configuring jQuery parameters for show/hide is that it doesn't cover enough ground and that you would need both show and hide option configurations. What if I wanted to use slideDown and slideUp or some other combination of UI animations? I think a single callback, like visibleFn
should be enough. A function like fadeFast
could get complex depending on the project requirements, and could easily be tucked into Backbone.View.prototype as a mixin.
from backbone.stickit.
Ah, OK, I see what you're saying. afterUpdate fires after the DOM is updated, but visibleFn would fire after the model value changes (and then would enact the DOM change).
I'm not totally convinced that passing through show/hide params wouldn't be helpful, even if it's just a single set for both show and hide (I think it would be pretty common for the duration and easing to be symmetrical for show/hide). But that's something that could easily be added later if other people request it.
from backbone.stickit.
This is on master - I'll cut a tag soon. Thanks for the help @kevindente
from backbone.stickit.
Awesome! Thanks!
from backbone.stickit.
Related Issues (20)
- Support falsy values in classes binding HOT 3
- [Suggestion] "name=" selector HOT 5
- Change Event Fires Twice for Number Input Type HOT 3
- events: ["keyup"] in ie8 HOT 1
- Using equality operator instead of identity operator for select field HOT 2
- bind the model with backbone variable HOT 3
- Confusing `updateModel` name HOT 4
- Problems with defaultOption as a function, returning false
- Make 'updateModel' supporting Promise? HOT 3
- Make compatible with Lodash v4 HOT 2
- IE7 input change events
- The bindings crashed in IE11 and Edge checkbox
- Dependent select HOT 1
- Sorting select options
- bblatest branch / listenTo refactor question
- Deselecting multpile checkboxes don't run validation.
- Is this project still alive? HOT 3
- Maintainer Needed HOT 1
- Multiple DOM elements with matching ID's - is this legal? HOT 2
- Loss of context in onGet() function HOT 4
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 backbone.stickit.