Comments (11)
Any thoughts on the above?
from ampersand-view.
Would love to see some events on collections as well. It's kind of a blackbox when you render collections.
from ampersand-view.
Hello scottcorgan
Ampersand Collections have the same events as Backbone Collections eg add, remove, refresh, reset, sync, it is possible to create custom events. In my use case, I'm using ampersand-view-switcher and in my parent view i am listening for collection reset event, but there are scenarios where the collection event is not in sync with the view, the event is fired earlier than the view ready in the DOM.
For now i decided to integrate a npm module, that observes the DOM selector and notifies for changes, eg: selector-observer.
from ampersand-view.
Can you monitor the 'rendered' property on the view? I believe it is intended for just such behavior.
from ampersand-view.
My thoughts on how it should work would be like a collection:
var things = this.renderCollection(someColleciton, SomeView, someElement);
things.views.on('add remove', function (view) {
});
My main reason for this feature would be expanding a parent container when a child is added or removed. I've hacked around this by listening to the collection itself and sizing all the children to resize the parent, but this introduces performance degradation when Having to do a lot adding and remove of children.
from ampersand-view.
Hello @wraithgar, in your proposal to listen for the 'rendered' property how should i watch the attribute change?
from ampersand-view.
The quickest way is once the view is instantiated, and before you render to do something like this.listenTo(view, 'change:rendered', someFunction);
from ampersand-view.
Hello @wraithgar, i have tested the above code, placing it on the view/child view and also different approaches based on it.
The event does get fired, but the issue persists, when event is fired in a parent view the DOM of the child views is still not available.
Eg: parent view is a container 'DIV' which contains a list, and each 'LI' is a child view, event 'change:rendered' is triggered in the parent view but child view is not yet rendered in the DOM. If i listen for 'change:rendered' in the child view, the event will be triggered multiple times equal to the length of child views.
Any thoughts would be greatly appreciated, since neither with 'change:rendered' or listening for collection events, the parent view gets notified all the child views have finished rendering.
from ampersand-view.
Yes you're right because you're doing this from a collection the solution isn't going to be that simple. The solution to this is going to be as @scottcorgan suggested, having collections be state objects that can have true prop
attributes
from ampersand-view.
It would be great to have such a feature as @scottcorgan mentioned above in ampersand, without the need to include third party npm modules or code.
from ampersand-view.
this affects &-view, but at the end-of-the-day, the solution is really begging for extra work on &-collection-view to host an eventing Collection. I don't however, see the potential perf gains? @scottcorgan, how were you expecting better perf from your suggested solution?
from ampersand-view.
Related Issues (20)
- List cdaringe as lead maintainer and add him to core team HOT 6
- deep nested subviews issue of re-rendering HOT 14
- Possible fix to template engines that attempt to copy the getter-laden context from going crazy HOT 3
- $('.className') vs this.queryByHook('hookName') HOT 2
- The ability to extend the declarative style of the subviews is very limited HOT 6
- Using deprecated version of ampersand-state HOT 1
- get-object-path issues + proposal HOT 6
- reset() throwing errors since I build from ES6 HOT 4
- Release ampersand-*-view HOT 1
- Release new version HOT 1
- Make bindings extensible HOT 11
- Enhance docu about _upsertBindings() HOT 4
- _downsertBindings needs to clear the _subviews array
- renderSubview expects subview render method to return subview instance HOT 3
- Possible bug with the auto-generated prepareView() ? HOT 4
- Enchancement bubble subview events
- Enhancement to provide single declarative place for event listeners
- Looking to become maintainer HOT 6
- package-lock.json HOT 1
- NPM Audit HOT 1
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-view.