Looking at the example in https://codesandbox.io/s/km2n35kq3v
The initial values are hard-coded.
<Wizard
initialValues={{ employed: true, stooge: 'larry' }}
However, i want to make an ajax call in ComponentDidMount, fetch the initial values, then (re) set the initialValues when the call completes.
<Wizard
initialValues={this.state.myInitValues}
Nothing happens, when the form re-renders, the initialValues do not change - What am i missing ?
that example only works for hard-coded values
No.
As long as the values are fetched higher in the tree, "above" the <Wizard/> component, they can be passed in as props just fine. React Final Form even has fine grained isEqual() control over determining when the initialValues prop changes (in which case the form would be re-initialized) or not.
Hope this helps...
I figured this out.. that example only works for hard-coded values, I should not have assume otherwise.
It turns out initialValues are being passed down to the Wizard component and set as state within the Wizard component in the constructor.
When the ajax call returns, the constructor does not get executed again.
Related
I'm building an autocomplete text field component. We will show popup of items filtered based on what users type. It is going to be async, I will get the details from the server and do some filtering based on the text typed in the field.
So here, I have run this filtering logic whenever I send new data to the component.
I come from angular, there we used to have ngOnChange(). Is there something similar available in svelte3.
Right now, I'm filtering by calling the method from outside by binding bind:this. I don't feel like this is a correct approach.
https://github.com/manojp1988/svelte3-autocomplete/blob/master/dev/App.svelte
Without stores, using a prop
Just using a prop:
export let search = '';
....
$: if (search !== '') { // make it react to changes (in the parent)
doSomeThing(search);
};
Stores
Svelte also has stores. A store is an observable object which can be observed everywhere even beyond you project with RxJS.
Example:
const unsubscribe = search.subscribe(s) => {
doSomeThing(s);
});
onDestroy(unsubscribe);
In another component you can use search.set('Hi');
But looking forward for other solutions to handle these kind of changes in parent <-> child components or calling child Component methods.
From child to parent we can fire events.
But from parent to child ...? we can use a store or Component bind:this or ..? but ....
I have a component, that takes a balance prop, and this balance prop can change over time.
I then have a React Final Form to send a transaction, with usual fields amount to send, receiver... And in my validate, I just check that the user has enough balance to send the transaction.
However, if my balance changes when the user is inputting something, then the whole form resets. How would you only reset part of the form state?
See this codesandbox for an example: https://codesandbox.io/s/jn69xql7y3:
input something
wait 5s
see that the form state is blank again
I just ran into this issue with react-final-form where the form completely resets when any state change happens in a wrapping component.
The problem is here (from your codesandbox)
<Form
initialValues={{ amount: 0, balance }} <-- creates a new object on every render
The problem is that when initialValues changes the entire form reinitialises. By default, whatever you pass to initialValues is compared against the previous one using shallow equals, i.e. comparing reference.
This means that if you create a new object in the render, even if it's the same, the entire form resets when some state changes, the render function re-runs, and a new object with a new reference is created for initialValues.
To solve the general problem, if you just want to turn off the form resetting, what I've done is just move my initialState, which never changes, out to a variable so that it's the same reference on every render and therefore always appears to be the same to final-form with the default behaviour. I would prefer a configuration to actually completely turn off this reinitialisation behaviour, but I can't find one in the docs.
However if you actually want this, but need to modify it, the comparison behaviour can be configured using the initialValuesEqual prop (docs here), to do a deep comparison on the initialValues object for example.
You can also use the keepDirtyOnReinitialize prop to only reset the parts of your form that haven't been touched.
I would guess some combination of the above might solve your usecase, depending on the exact UX you need.
Adding onto what #davnicwil mentioned, my solution is useMemo() hook in func components:
const initialValues = useMemo(() => ({ amount: 0, balance }), [])
By using useMemo it creates only 1 object during the life of the component and subsequent re-renders don't cause initialValues to overwrite the form values.
Another solution is to use react-final-form Form prop initialValuesEqual={() => true}
<Form initialValues={{ amount: 0, balance }} initialValuesEqual={() => true} .../>
ref: https://github.com/final-form/react-final-form/issues/246
My top-level component includes a settings dialog that includes the user's credentials. When a change is made in that dialog and the dialog is dismissed (state is changed to dialogOpen=false), I want to force a new fetch from the server since the credentials may have changed. In Relay classic, the top-level component includes a Relay.RootContainer and so I just passed forceFetch=true to that RootContainer. In Relay modern, my top-level component includes a QueryRenderer. So how do I force the refetch in this case?
I found this issue, https://github.com/facebook/relay/issues/1684, which seems to indicate that the QueryRenderer always refetches, but this doesn't seem to be the case in my testing. At least, I'm not seeing my fetchQuery get called after the state change/refresh when the settings dialog is closed. I think I'm probably not completely understanding the statements in that issue.
Can anyone clarify?
OK, I think I figured out my disconnect here. In checking the source for QueryRenderer (don't know why I didn't do this in the first place), I saw that a fetch will occur if props.variables changes. So I just defined a boolean instance variable called refetch and flip its value when my dialog is dismissed:
<QueryRenderer
environment={environment}
query={query}
variables={{refetch: this.refetch}}
Since this doesn't seem to well documented, I'll mention here that QueryRenderer will re-fetch when any of the following conditions is true:
current query parameter is not equal to the previous query parameter.
current environment parameter is not equal to the previous environment parameter.
current variables parameter is not equal to the previous variables parameter.
You can use the retry function that's passed to QueryRenderer's render.
<QueryRenderer
environment={environment}
query={graphql`
query MyQuery($exampleUserId: String!) {
user(userId: $exampleUserId) {
favoriteIceCream
}
}
`}
render={({ error, props, retry }) => {
// Here, you could call `retry()` to refetch data
// or pass it as a prop to a child component.
return (
<IceCreamSelectionView refetchData={retry} user={props.user} />
)
}} />
I'm having a great time playing around with knockout js and have just started to get to grips with adding custom bindingHandlers.
I'm struggling a bit with the update function of a 3rd party jqWidget gauge - I can only get it to animate the first time I update the variable. On each update after that it just sets the value directly.
I don't fully understand ko.utils.registerEventHandler() and what it does although I've seen it in a bunch of other examples. Is this what is causing the animation to break? How do I know which events to register from the 3rd party widget?
For some reason this works fine if I add a jquery ui slider that is also bound to the observable.
You can test this here: set the value a few times to see that it animates the first time and not after that.
http://jsfiddle.net/LkqTU/4531/
When you update the input field, your observable will end up being a string. It looks like the gauge does not like to be updated with a string value, at least after the first time.
So, if you ensure that you are updating it with a number (parseInt, parseFloat, or just + depending on the situation), then it appears to update fine.
Something like:
update: function(element, valueAccessor) {
var gaugeval = parseInt(ko.utils.unwrapObservable(valueAccessor()), 10);
$(element).jqxGauge('value', gaugeval || 0);
}
http://jsfiddle.net/rniemeyer/LkqTU/4532/
You would generally only register event handlers in a scenario like this to react to changes made by a user where you would want to update your view model data. For example, if there was a way for a user to click on the gauge to change the value, then you would want to handle that event and update your view model value accordingly.
I'm answering the
I don't fully understand ko.utils.registerEventHandler() and what it does
part of your question.
registerEventHandler will register your event handler function in a cross-browser compatible way. If you are using jQuery, Knockout will use jQuery's bind function to register the event handler. Otherwise, will use the browser Web API with a consistent behavior across browsers.
You can check it out on the source code.
I've just updated my project from jquerymobile 1.0a1 to version 1.0.
I've encountered a problem with dynamic content. Based on an ajax search I populate an unordered list with list items. Previous the following code refreshed the list so that all the styling appeared correctly:
$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');
However as of 1.0 this no longer seems to work.
The list appears but the styling is all wrong and the data-theme on all the elements gets ignored.
Has anyone come across a similar issue with updating and come across the solution.
Updating lists If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create
any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a
list. This is done for performance reasons. Any list items already
enhanced will be ignored by the refresh process. This means that if
you change the contents or attributes on an already enhanced list
item, these won't be reflected. If you want a list item to be updated,
replace it with fresh markup before calling refresh.
http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
if #myContent is the listview you can do this:
$('#myContent').listview('refresh');
if #myContent is the page you can do something like this:
$('#myContent').trigger('create');
Create vs. refresh: An important distinction Note that there is an important difference between the create event and refresh method
that some widgets have. The create event is suited for enhancing raw
markup that contains one or more widgets. The refresh method should be
used on existing (already enhanced) widgets that have been manipulated
programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
What you want can be achieved by replacing your 2 lines of code with the following:
$('#myContent ul').listview('create');
Hope this helps...
I've had this issue. The reason you are getting things all messed up is you are initalizing and refreshing the element multiple times. I noticed I had 2 different functions running that would call .listview('refresh') on the same element. After I took one out the themes and data went back to looking normal. Also are you getting any JS errors?
EDIT:
To be more specific you are calling .listview() somewhere in your code 2 times which is initializing it twice. I would wait to before you page is loaded to run the refresh so you only call it once.
Another thing you could do is check if the element is initialized already or not so you don't do it twice. Just check the element or in some cases the parent to see if the class ui-listview is present.
var element = $('#myContent').find('ul');
if ($(element).hasClass('ui-listview')) {
//Element is already initialized
$(element).listview('refresh');
} else {
//Element has not been initiliazed
$(element).listview().listview('refresh');
}
Just an FYI you can chain those events to look like $('#myContent').find('ul').listview().listview('refresh');
It cand be achived through.
$('#myContent').listview('refresh');
The below snippet shows you to load data from xml and dynamically create a list view.
function loadData()
{
$.ajax({
url:"BirthdayInvitations.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find("event").each(function()
{
$("#mymenu").append('<li>' + this.textContent + ' </li>');
});
$("#mymenu").listview('refresh');
}
});
}
See if this is related to ur question http://www.amitpatil.me/demos/jquery-mobile-twitter-app/ and this one also http://www.amitpatil.me/demos/ipad-online-dictionary-app/
In first example i am using listview('refresh'); method and in second example i am using
$(document).page("destroy").page();