I am using backbone and calling the collection.fetch() it seems to
resetting the data though, while with the default behavior should be
"intelligently merge" http://backbonejs.org/#Collection-fetch my question is what is the default behavior ?
From the 1.0.0 changelog:
Renamed Collection's "update" to set, for parallelism with the similar model.set(), and contrast with reset. It's now the default updating mechanism after a fetch. If you'd like to continue using "reset", pass {reset: true}.
So before 1.0.0, a Collection#fetch call would reset the collection but from 1.0.0 onwards the fetch does a set call. I'd guess that you're reading the 1.0.0 documentation but using a pre-1.0.0 version of backbone.js.
Related
So I am trying to work with FullCalendar and I want to have the user be able to edit an event details, click update and I locally update the event and then push it up to the server. I have the following code, but the issue is when there are multiple changes, is calling the event callback multiple times. Is there a way I could do this just once to save on many API calls? Here is the code I have
let currentEvent = calendarApi.getEventById(eventId);
currentEvent.setExtendedProp('notes', notes);
currentEvent.setExtendedProp('person', person);
Maybe there is a different method I am just not seeing in the docs?
The undocumented mutate method that's used to implement setExtendedProp accepts an object that can have multiple properties. You could use it like this:
event.mutate({
extendedProps: {
notes: notes,
person: person,
},
})
or, using object property value shorthand:
event.mutate({extendedProps: {notes, person}})
I have absolutely no experience with fullcalender though, so use at your own risk!
We need to drop an external item and then update the schedule data accordingly to that change by calling setState but resourceHeader become empty as their templates don't render as a consequence
I've reproduced the bug in this stackblitz : https://stackblitz.com/edit/react-gzetyr
and here also a recorded screenshot demo showing it: https://i.imgur.com/wjT9APb.gifv
PS: i had to call forceUpdate inside a setTimeout after the setState call because strangly setState call alone wasn't enough to re-render the schedule.
Best Regards
i solved this issue by calling
this.scheduleObj.addEvent(droppedItemData);
as in creation-using-addevent-method example.
In that example addEvent call seems not having any effect on the schedule (no appointemnt added) by i found that when calling it in the onTreeDragStop (as in their external-drag-drop) after updating the droppedItemData with new matching data, it works, and later on , in the onActionBegin (as in their external-drag-drop) an event.requestType === 'eventCreate' will be returned and there i could make the backend update too.
We have validated the reported problem at our end and we suggest you to use the delayUpdate property to overcome the problem.
<ScheduleComponent ref={schedule => this.scheduleObj = schedule} delayUpdate={true} > </ScheduleComponent>
<TreeViewComponent ref={tree => this.treeObj = tree} delayUpdate={true} </ TreeViewComponent>
Sample: https://stackblitz.com/edit/react-scheduler-i268259-external-drag-and-drop-utku7n?file=index.js
Kindly try the above sample and get in touch with us If you would need any further assistance.
UG link(delayUpdate): https://ej2.syncfusion.com/react/documentation/common/how-to/resolve-react-template-issues/
I'm using angularJS and migrating to ui-router v1. I'm trying to get deep state redirects working like they used to in the previous version of ui-router.
I've successfully implemented the DSRPlugin in my config modules, and deep state redirects are firing and work as expected. However, I'm unable to reset the deep state. I need to be able to reset the deep state on a button click, which means logic within my component. Previously I could inject $deepStateRedirect into my controllers and simply call $deepStateRedirect.reset({}), but I'm no longer able to inject $deepStateRedirect. How can I access the reset method in ui-router v 1?
I have also noticed that when using DSR as a config object you can specify a function to determine if the redirect occurs. I could alternatively use this to determine whether to do the redirect or not, but the documentation is lacking. It shows that I should return a truthy value to do the redirect or a falsey value to prevent the redirect. In testing, returning true or false only causes a transition error: "i.state is not a function".
I'm not using a build process, just plain script includes.
Anyone have any ideas on how to make this work through either of the above methods?
This may not be the best practice way of doing the reset, but I found a solution after logging out various ui-router objects.
Inside of your controller you must inject the $uiRouter object. Then, you can set a variable to $uiRouter._plugins["deep-state-redirect"]. The reset() and other methods are available on the plugin's prototype.
You can then use that object and call those methods similar to how it worked in the previous version when injecting $deepStateRedirect.
var $deepStateRedirect = $uiRouter._plugins["deep-state-redirect"];
$deepStateRedirect.reset({});
I found this only in the source code and then in the documentation: https://ui-router.github.io/ng1/docs/latest/classes/core.uirouter.html#getplugin
The more correct way is to use UIRouter#getPlugin(pluginName), that is
var $deepStateRedirect = $uiRouter.getPlugin('deep-state-redirect');
$deepStateRedirect.reset(...);
I'm trying to use the second parameter of setState to pass a callback function, but it appears (from what I can gather) that the server-side renderer ignores this parameter completely. I'm using Gatsby which utilizes server-side rendering to build a static React-based site. My call is in an onChange handler, and looks like this:
this.setState({ [event.target.name]: event.target.value }, () => { console.log('setState callback') })
The state is updated as expected, but the callback is never called. Note: The same issue applies whether I pass an object or a function for the first parameter. The component function looks like this:
ReactComponent.prototype.setState = function (partialState, callback) {
[...]
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
That updater's method, which lives in ReactUpdateQueue.js (according to the call stack) looks like this:
enqueueSetState: function (publicInstance, partialState)
I don't fully understand the build process for React, but I believe that method/file is coming from this file in the source:
/src/renderers/shared/server/ReactPartialRenderer.js
The only other place I can find this function defined is here:
/src/isomorphic/modern/class/ReactNoopUpdateQueue.js
enqueueSetState: function(
publicInstance,
partialState,
callback,
callerName,
) {
warnNoop(publicInstance, 'setState');
}
which looks like the correct method signature, but doesn't appear anywhere in the call stack when I debug the setState call in my code. This doesn't appear to be a problem with client-side rendered React components (I'll try to set up a simple repo to show this issue, but it doesn't appear replicable on CodePen etc.) I know I could use componentDidUpdate to accomplish what I need to do, but the callback is much more convenient in my instance, and I hate leaving a mystery like this unsolved. :)
Well, I figured it out, and turns out, as is too often the case, this was a self-inflicted error. The default Gatsby install uses React v15 but we wanted to use 16, so we added a direct dependency to it in package.json, which got built in to the resulting package. I still don't quite understand why the above mentioned version of enqueueSetState was called instead of the proper one, but removing the reference to react (and adding gatsby-plugin-react-next, which does what we want by simply pointing webpack to the newer version) fixed the issue.
At least this was a good excuse to get a little more familiar with the guts of React. Perhaps this will save somebody else some time in the future.
I am making a AJAX call using something like:
model.fetch(
dataType: "jsonp",
success: function(data){}
)
My question is if I want to modify the data return from the server, should I do it in success or model.parse(). Also, which method gets executed first?
WARNING: I am a backbone newbie :)
Thank you in advance!
Parse will be triggered first.
The backbone official documentation its not clear about it. It says:
parse is called whenever a model's data is returned by the server, in fetch, and save. The function is passed the raw response object, and should return the attributes hash to be set on the model. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses.
It doesn't talk about who is triggered first.
But i test it by my self, and parse was triggered first.
You can test it by yourself, if you don't have an API for test, Use dataType:"jsonp" and try to find a web site that is using REST.You'll see that JsonP is triggered first. :)