Today,I tried to make a list with redux where you can add and remove elements as you want visible here. My list is in fact an array updated every time user click on "Add to the list" or "Remove last added element".
Now I try to do one thing but I don't know how to do it. Indeed I what I wanted to do is, if for example the user try to add Tristan again, the FromControl with Tristan became 'sucess' (I use bootstrap too) but I don't know how to reach this element precisely, because if I used a variable in my reducer and i said the style of my FromControl depends of the state of this variable, every FormControl will become 'sucess'.
Thanks in advance for your help :)
(Sorry for my english level too)
You can use Array.prototype.findIndex() to get the index of the element in your array and work your way up from there.
I see as well that you have a lot of warnings in the console, I suggest you to add the key in your components when inside a foreach and move the setState calls to componentWillMount or another appropriate place.
Related
I am wondering if anyone has theories on what to try
One of the devs on my team is using wrapped custom HTML components from another team (the wrapper is basically Robin Weiruch's https://github.com/the-road-to-learn-react/use-custom-element except made into Typescript).
The odd behavior is that the 2nd "select" does not follow the first when the checkbox is checked if and only if the 2nd select had been changed. It will follow the first if the first is changed after the checkbox is checked.
I refactored the code from a useState to a useReducer -- as the wrapped components update, they do cause subsequent change events (and extra dispatch calls) except in the problem scenario [the change event doesn't fire the first time -- it's like its stuck in a debounce]
any theories on what to try?
thanks
useCallback with a warning suppression worked
A better way of dealing with an external component that misbehaves on its understanding of state is still desirable
I'm new to Ember and have a leaking state problem. I have a carousel widget that displays one item at a time and allows the user to click previous/next to see each item.
Here's the simplified carousel's component:
<button {{action "nextItem"}}>Next</button>
{{carousel-item item=selectedItem}}
Clicking next changes the selectedItem property so the next item is shown.
What I've realized is that the carousel-item component isn't re-initialized every time I move to a previous/next item. The DOM is reused each time, and the component's properties are shared since it's all one instance, which means I can have leaking state.
The alternative I see is to render all the items initially, so each has its own instance:
{{#each items as |item|}}
{{carousel-item item=item}}
{{/each}}
and to hide all but the selected item using CSS. However, this option kind of feels like a jQuery hack -- seems like Ember would have a better way. And I'm only ever showing one item at a time, so I hate to have so many extra DOM nodes when I don't need them.
What is the recommended way to handle this kind of a UI, where you only need one item shown at a time but don't want to share state between items? I'd imagine I should have one instance of the carousel-item component per item, instead of sharing an instance across all of them. But it doesn't feel right to instantiate every single carousel-item at first either. And I can't imagine the Ember way is to worry too much about the DOM details myself (determining which one is shown/hidden based on a class and some CSS).
Firstly, whatever framework or library you are using, jQuery, ember, angular, react, they are just a pack of JS/HTML/CSS right? So you should think in it's way, there is no magic!
So of course 1 component will only create 1 instance. If you just changed it's property(item in your demo), it just changed the property of an instance, other properties of it will remain as it is and triggered re-render. You cannot expect more. You have to manually reset other properties.
And yes, rendering everything by {{each}} looks stupid, but think about it, how could you create a smooth carousel animation by render only one DOM? At least you need to render 3 (current, previous and next) right?
Since carousel is a common UI, I recommend you to check existing ember addons fist before you write by yourself: https://emberobserver.com/?query=carousel
If I understood your problem correctly, the willUpdate hook in Ember.Component class should help you out. I this hook you can clear up the attributes, remove DOM objects, or anything at all. This will be called each time the component is about to re-render itself.
A simple example is of form:
willUpdate() {
Ember.$(this.get('element')).empty();
},
This will clear the DOM on each re-render forcing it to redraw elements.
You can try out other hooks too and see which event will serve your need. All of them are very helpful and serve different purpose.
I'm still running into the same problem, filters and functions inside ng-repeat being called all the damn time.
Example here, http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview, anytime you change something on a single row, someFilter filter is called 1000 times.
Apparently it's because any change on a child scope bubbles up to its parent, causing $digest to run, causing all filters to run(https://stackoverflow.com/a/15936362/301596). Is that right? How can I prevent it from happening in my particular case?
How can I make it run only on the item that has changed?
In my actual use case the filter is called even when the change is not even on the items of ng-repeat, it's so pointless and it is actually causing performance problems..
// edit cleared all the unnecessary stuff from the plunker
http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview
This is just how Angular's dirty checking works. If you have an array of 500 items and the array changes, the filter must be reapplied to the entire array. And now you're wondering "why twice"?
From another answer:
This is normal, angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.
And the answer it references: How does data binding work in AngularJS?
Edit: If you're really noticing sluggishness (which I'm not on an older Core 2 Duo PC), there are probably a number of creative ways you can get around it depending on what your UI is going to be.
You could put the row into edit mode while the user is editing the data to isolate the changes, and sync the model back up when the user gets out of edit mode
You could only update the model onblur instead of onkeypress using a directive, like this: http://jsfiddle.net/langdonx/djtQR/1/
lets say I've got a function that iterates over an array. The function is outside the updatepanel, the array is defined within the update panel. The items of the array are dynamically created. On the first try I've realized, that the values of the array do not update when the update panel loads again.
Would be glad if someone can provide a solution for this.
Step one: Remove that update panel. Replace it with a proper AJAX call. Update panels will murder your performance and create all manner of maintenance headaches. I am in a world of pain thanks to our dev team using update panels as a way to get AJAX on the quick and dirty.
Allright, this might be a strange question and maybe I am heading the wrong direction, but here is my problem:
I have a SearchForm object which holds a collection of Tag objects. When a Tag object is clicked by the user, it highlights itself and triggers an event. The SearchForm class listens to this event and submits itself. The Tag object has no relation to the SearchForm.
So far, so good.
Now some Tags must activate other Tags when clicked. Each Tag knows what other Tags it must activate. But in order to do so it must KNOW about the whole collection of Tags held by the searchform.
Would it be "bad" if a Tag instance (= collection item) has a reference to the complete list of all other Tags (= collection)?
Of course some something like this would be doable:
Tag is clicked -> SearchForm is notified -> checks if the clicked tag must activate some others -> SearchForm activates the needed Tags itself.
But this seems a bit akward, or not?
It doesn't sound like there's anything wrong with that. If there's an item in a collection that needs to know about other items in the collection, it's perfectly reasonable for it to know about the collection as a whole as well.
Most GUI frameworks, and the DOM itself that presumably you're working with, have collection items that know about the collection they're in (in the DOM, on any element, you can call parentElement to get its parent).
In general, it's good if objects don't "know" about more than the minimum they need, in order to reduce coupling. But if an object does need to know about something, giving it a reference to that isn't unreasonable.
It's not uncommon for an item in a collection to know its whereabouts... think linked lists or trees. If you don't want the tag to know the whole list you might add a reference to its related tags only.
I think it's just an observer design pattern.
I don't know javascript but I guess it should be doable.
In any case avoid hard-coding your list.