I have a parent components, A, and child components B & C. I need to share a list between B & C, say a list of todos. Child C can add/delete an item in the todo list. Assume that the todo list is backed by an async service.
I have put together an app with A, B and C. My graph has the selected todo (set from a callback) atom and the list of current todos in its own atom. The current todo list is dependent on an id. When A mounts, I set a "id" from the URL (think routing). Since my views use the todo list recoil value, they get their list when its available.
When I click the delete button in C with a todo selected, I update the list on the server. But I want the recoil todo list to be refreshed after the request returns Ok that the todo was deleted. Or if I add a todo, I want to immediately add the todo to the list so its immediately viewable, add the todo on the server then fetch the todos in the background to refresh the recoil todo list.
How do I hand these last 2 parts in recoil?
Add a "version" or "successfully saved" recoil atom that can be used to trigger an update after data has been saved to the server. This will cause memory leaks though: https://github.com/facebookexperimental/Recoil/issues/422
Related
I have a list of items. Each item has a "complete" flag. If this flag is true, the item shows in view A. If it is false, it shows in view B. The items are retrieved via an API request, with a client-side filter applied through a computed method on the base dataset. So for view A it will return items with complete=true, for view B, it will return items with complete=false.
The complete flag is editable (via a checkbox). I have a watcher function on the complete field that results in a PATCH being made to the item to toggle the complete field on the server.
Here's the issue. Since the vue app is filtering items based on the complete flag, any time that field changes, the item is removed from the view, so the watcher never gets triggered and the PATCH is never made.
It makes sense that the item's removal would cause the filter function to be re-run, however it seems odd that the watcher is killed before it can run.
So my question is, how do I achieve this - a list of filtered objects where the filter criteria can be changed, and have that change recognized via a watcher or similar?
You're probably better off using an #input event on the checkbox, and tying that to the api call:
<input type="checkbox" #input="onCheckChange">
...
methods: {
onCheckChange() {
// Perform API call here.
}
}
I've two components
1. viewAndUpdateDish.vue
2. updateDish.vue
In viewAndUpdateDish,
user pick a restaurant from the drop down
dishes of that particular restaurant will filter out and loaded to the table.
then the user hit the update button on a dish and go to updateDish.vue component and update the dish.
then after he update the dish user is redirected to the viewAndUpdateDish
When the user redirected to the viewAndUpdateDish that previously selected restaurant should be selected and dishes should loaded. This is my use case.
What I did so far is,
create a variable called pickedRestaurantId in vuex store and when user select a restaurant I updated that Id.
And in the updateDish component at the end of the update function, I emit a event like this, this.$root.$emit("clickedUpdate");
And then in the viewAndUpdateDish compoent I did
mounted() {
this.$root.$on("clickedSomething", () => {
this.loadDishes(this.pickedResViewAndUpdateDish);
});
},
But this doesn't seems work!
How do I achieve this using vuejs?
Hope my question is clear to you.
On your "viewAndUpdateDish" component after your update logic you can do the following:
this.$emit('clickedUpdate',yourResturantId);
then on your parent component make sure you are listening to the "clickedUpdate" event:
<update-dish #clickedUpdate="loadDishes($event)"></update-dish> .
I was using Event aggregate publish method to update view from another view. when I created publish and subscribe data was able to get in view model , but that is not updating in view with assigned variables. If I use JavaScript to fill value it's working but not able to trigger validate controller.
Expected result is:
From the subscribe method I have to fill the view values.
After that it should trigger validate on value changes.
In below gist run I have two view and view-model. One is registration-form and second one is data-form. In data-form I have table with data, on click of each row I am publishing one event with selected row data, and this published event I was subscribing in side of registration-form view-modal. For more details look into below gist run.
Gist run: https://gist.run/?id=8416e8ca1b9b5ff318b79ec94fd3220c
Two possible solutions: (to your "undefined" alert)
Change alert(this.email); to alert(myself.email);
Use the thick arrow syntax for the subscribe function. Change:
this.ea.subscribe('MyrowData', function(obj){
to
this.ea.subscribe('MyrowData', obj => {
This syntax allows the new function to preserve the context/scope of the parent, which means that this.email will still be accessible.
Another suggestion:
You could simplify your data-form.js function as follows:
Change:
this.eventAggregator.publish('MyrowData', this.items[this.items.indexOf(item)]);
to:
this.eventAggregator.publish('MyrowData', item);
This will work because you've already provided item in your function call click.delegate="PopulateData(item, $event)".
In fact, you could even delete $event and event from the two PopulateData definitions (in data-form.js and data-form.html).
When I implement these suggestions, your data is also validated correctly.
I need to build a sample MVC UI app using Kendo UI.
I have 2 multiselect widgets for airline names and airport names respectively and below I have a grid with airline airport data.
Now when I select airlines or airports in the multiselect, upon clicking a Fetch button, the grid should refresh.
I created a ViewModel named AirlineAirportViewModel for containing List<Airlines>, List<Airports> and List<AirlineAirports>.
I instantiate the List<AirlineAirports> in the Get action method of the controller and fill the other two lists getting distinct airline and airport values from the List<AirlineAirports>.
While posting on filter button click, I am able to get action parameters as 2 List<string> types which contain only the selected multiselect items
Instead of that, I want this action parameter of type AirlineAirportViewModel so that in future, I will be able to add more filter widgets and the number of parameters stay one only.
Now, am I approaching this in the right way ? If I need the ViewModel as action parameter, where should I store the selected items from the multiselects ?
I am trying to implement an autocomplete field. The results are to be shown in a list. But everytime I make a search the new result is appended to the previous results. I tried clearing out the store attached to the list but it didn't work.
In debugger the store shows 2 items while the list shows many items (2 new + the items from previous search results)
Here is the fix:
list.refresh()
After removing the items from the attached store you need to refresh the list to tell it to load itself again.
try calling removeAll() on your store.
Eg.: Just to be sure check before removing
var isStoreLoaded =Ext.getStore("theStore").isLoaded( );
if(isStoreLoaded)
{
Ext.getStore("storeBomSearch").removeAll();
}
I hope this is a normal store, not a treeStore.