Comments (6)
stateFn
for this may not work. I need to think some way to do it.
You should not use .
operator for states. They will cause re-rendering. This is not only for flow-components
. But for templates in general.
from flow-components.
Hi, as this issue is really vital for my project I created a small example to examine the rerendering behavior of simple blaze templates compared to flow components. Please excuse the rather long message.
- First of all, the example shows that the
.
operator does not cause rerendering in general. - Secondly, I discovered some interesting differences between the handling of live queries and their fetched results.
You can find the source code here: https://github.com/christianvoigt/flow-components-rerendering-test
I have deployed the example here: http://flow-components-rerendering-test.meteor.com/
I have created a local collection called Greetings and inserted some initial greetings of the form {text:String}
that are displayed in two #each
loops. The first uses a normal template that has the attribute greetingText=this.text
. The second loop uses a flow component with the same attribute.
Please open the console to get log messages about how many "greeting templates" and "greeting components" were created, rendered and destroyed. If you click on the first link that inserts a new document into the collection, you will see that only one new template is created and rendered, while all flow components are destroyed, recreated and rerendered. This is the problem we already talked about. Interestingly, this problem only occured if I used Greetings.find().fetch()
instead of Greetings.find()
for the #each
loops.
So one option would be to only use live queries in these cases. But this is very limiting. I thought maybe it would be possible to wrap this.text in the #each
loop into a function similar to what stateFn$ does, but that doesn't seem to work either.
If you click on the second link, the text of one document in the collection will be updated. As I already said above, this does not cause a rerendering of any of the normal templates, even though I used the .
operator. But it does cause a complete rerendering of the list of components.
Do you have any ideas for a workaround I could implement on my own? If I can't get this to behave in the same fine-grained way as it did before, I fear I have to revert to simple Blaze templates for now.
from flow-components.
Yes, I have the same question sort of...
Can you perhaps show an example when you use parent + child components looping over a collection and what the default/expected behavior is when you update the cursor/document or any reactive var/state in the component.
from flow-components.
@arunoda If we shouldn't pass .
into the child component, how should we pass it in order for it to be more efficient?
from flow-components.
+1
from flow-components.
I have this issue too of components inside #each loops always rendering on changes. Any idea on how to fix it?
from flow-components.
Related Issues (20)
- [Question] What is right approach? HOT 2
- How to access parent component? HOT 2
- Bug on switching between component based layout and template based layout HOT 2
- Uncaught Error: Must be attached HOT 2
- Passing a function to component HOT 5
- Content block is not working HOT 3
- Created callbacks in mixins not working HOT 5
- How would you set props in component/template/markup? HOT 3
- Using with React
- Why in the client folder?
- Communication between non-children component
- component.prototype. functions not accessible inside content blocks HOT 2
- Return null/undefined from find() when the component isn't found HOT 1
- Are there plans for ES6 support? HOT 2
- docs: hello-component isn't a valid name HOT 2
- add "tracker" package to dependency HOT 2
- Passing parameters to state functions multiple blocks deep lose the parameters
- Flow components + subscriptions manager HOT 3
- Use ES6 syntax in examples
- Uncaught TypeError: Cannot read property 'call' of undefined
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 flow-components.