We are in the need of populating UISelectOne- and UISelectMany-Components with SeletItems from a database. Instead of subclassing I decided to create a Child-Component element which is able to provide the SelectItems. This way we dont have to introduce new components for this behavior.
But I cant see whats the best way to do this. At first I thought I just need a TagHandler but it seems that idea was a dead end. I tried to create SelectItems within the apply-method but I dont know how to add the items to the component.
Is there another way. Do I have to create a component instead of a TagHandler?
I might be on the wrong path anyway: as mentioned above, I tried to add the items to the component, but shouldnt this be done by the component-tree automatically.
Any help is appreciated.
but I dont know how to add the items to the component
Just add it as child of the parent component which is already supplied as argument of apply().
parent.getChildren().add(selectItems);
Related
I am pretty new to react and trying to use a web component in the template and there are is a thing i dont understand.
It can be seen in this example below if you run the page (may need to hit reload once). Then watch the console. You will see the log in the constructor() the outerHTML is not "ready" yet its missing all attributes in the markup and they arrive only later on (in the connectedCallback) which is the second log.
https://stackblitz.com/edit/react-ts-jcjuvs?file=App.tsx,index.tsx
Whats happening here? Is there anyway to force the attributes to be available initially? Or not taken off and then put back on?
Note that doing this in a normal page does not have the same effect.
https://stackblitz.com/edit/js-l4uh4f?file=index.js,index.html
a) whats happening?
b) can i make this not happen?
Thanks!
There no no guarantee that a web component will have access to attributes in the constructor and attribute values can change at anytime. You should use the attributeChangedCallback lifecycle callback to know when values are set.
The element's attributes and children must not be inspected, as in the non-upgrade case none will be present, and relying on upgrades makes the element less usable.
Requirements for custom element constructors and reactions
My problem
I'm trying to add a component to an array at the input of a user(here the Building component).
My problem is that everything i add in this array is somehow duplicated and i can't explain it.
I also wasn't able to reproduce the problem in codesandbox but here is my town component that adds new Building components :
https://codesandbox.io/s/goofy-bhabha-yb6sq
The problem lies in the function addBuilding, because the position is added there and the duplicate does not contain the same position as the prévious building.
I've also made sure that the function is not called two times, à console.log inside the function told me that.
In this function i :
Copy the object i receive from a parent component (props.addBuild).
Create à new position .
add the position to the copy of the object.
give it a key number.
add it to the set.
done.
What happens :
I made sure there is no other push nowhere else (i've commented this function and nothing showed up as i triggered the addition of a new building)
As the component re-renders the duplication occurs.
What i've tried so far
I've tried using set instead of arrays which gives me the same
result.
I've also tried to copy the state and use the setState at the end which resulted in a too much calls of setState.
Pop the entire content of my state and push back the once that i want to keep.
I've also tried to add the function somewhere else in my program and got the same results.
A thing that would be a bit trashy but could solve my problem would be to remove duplicates from the array or set and add them back in the array. I've tried this and got too much calls to render error. But i'm sure there might be a way i have not tried.
Another detail is that i'm using electron.
Any help is welcome.
I've solved my problem by moving up my code in the parent component like suggested by #Sulthan.
But also instead of using a state i used a function so instead of passing a state as a prop to the town component i directly called the function that added a building to the list of building.
Here is what it looks like :
https://codesandbox.io/s/goofy-bhabha-yb6sq?file=/src/App.js
I still can't explain what happened but the state that called the function addBuilding provoked a second call of this function.
How can I pass asynchronous data from a parent controller to a child component? I am using angular 1.5.0 in order to create a child component that I would like to reuse in other views/controllers. I want to make the server calls in a parent controller/component and use the returned data in the child component, maybe modify it using a function. If I want my component to be truly reusable, then I don't want to have to put any code into my parent controller to direct the data.
In theory, I should be able to instantiate the component in the parent controller view, pass in the asynchronous data, and be able to use it in a function in the component when the data is returned.
I encountered this exact same problem with Angular 2. Am I not supposed to pass asynchronous data to components? If I want to do something with asynchronous data, do I always have to call for it in the component? This seems to be a huge flaw if someone needs to view the data in multiple ways and wants to use it in multiple components... This has been bugging me for days, and years if you count the Angular 2 issues. Any explanation or reasoning would be appreciated. Thank you in advance.
Here is an article which instructs to embed a component within a component so that you can start watching a binding. It is a very round about way of doing things, but it seems to do the job. It just seems ludicrous this functionality was not already anticipated when they created components, most data used in general is asynchronous, and it would be nice to have components that only deal with taking in the data, massaging it, and displaying it; without having to make it's own service calls. What if you have a few components that display the same data and you wish to embed them all in a controller's view that does the work of getting and updating the data and then passing it to those components? This seems like a likely scenario, and one I often encounter. So here is the article:
https://www.bersling.com/2016/09/10/wait-for-the-bindings-of-a-directive-in-angular/
It functions even though the code is not as pretty as wished, and I don't know the repercussions of this particular implementation, but it works. If I am overlooking an unforeseen issue, or if there is a better way, I am open to suggestions. Thank you.
I have two context types: (1) productsContexts & (2) rangeContext.
rangeContext is nothing more than preset ranges from a json file so as to group the products according to each respective range.
Below is an illustration of a side-box component that groups products
according to those preset ranges and it also illustrates the problem:
The first visit to that page, everything works fine, but click off and then re-visit the page and the previous data remains and then doubles itself, 3rd time, it is triple, and so on.
I did nothing with the rangeContext data but pass it along to a local variable for mapping data manipulation. I did not save anything to the context itself.
Here is what I have tried to do to solve this problem; all have failed:
I passed the rangeContext to state first, then on componentWillUnmount, I initialized state.
I Object.assign() the rangeContext to the local variable instead of directly passing the context to the local variable.
I took the context completely out of this component and used it in it's parent, and passed it to this component as props.
Nothing is working. While the hard data does not change, the range component never gets initialized on unmount and revisiting the page just carries forward what was in the range in the last visit and adds to it.
I know I probably did not do a great job explaining, but I know the problem is related to the context and I sure do not want to hit the database again, as I already did that for an earlier component.
Does anyone recognize the problem and have a solution?
Thanks
UPDATE:
I moved contextTypes for ranges out of the side-box component.
Using redux flux, I dispatched for the range-actions in side-box's parent and passed the ranges to side-box as props. The problem went away, but I am not happy. I need someone to tell me why this is the right things to do, as ...
I had already called range-actions in a previous component, so why not put it in contextTypes instead of calling redux again?
Where as I only had 3 lines of code on side box, I have the same amount of code lines since now I am calling propTypes, but now I also have
MORE LINES of code in the parent calling redux, something I had already done for the range data in a previous component.
I would greatly appreciate someone telling me if I am still doing this
all wrong, or why it is right I had to add 26 more REDUNDANT lines of
code calling redux flux?
I am looking for a way to access components / field that are either in the same items array as the accessing one or even only in a same parent items array (the last one is just a option).
In ExtJS3 this was easy by simply defining a ref in the owner container but I didn't found anything like that in ExtJS4.
I know that I can use Ext.ComponentQuery() or the shortcuts up() / down() or even Ext.getCmp() but they are all not what I am looking for, cause they just executes a bunch of code while the ref was such an easy Way to do things.
Yes, I am aware of the fact that using a ComponentQuery is much more fail safe than the use of hard coded references. But I just want to know if there are some other ways to do this.
Alternately, for your case of getting the next element in a container, you can use the nextSibling or prevSibling. All components have these methods. It would be a little less walking around the DOM structure. They also allow for a selector argument.
They are described in the docs here.
Here are some tricks I have used:
//lookup by name
formPanel.getForm().findField('state');
//lookup using nextSibling/prevSibling in a fieldset or fieldcontainer
myField.ownerCt.nextSibling('textfield[fieldLabel=Description]')
Here fieldLabel property is used to narrow down field selection but you can use ANY property at all. So if you construct a field with a property ref you can then use it to select your field similar how you would use it in a ComponentQuery .