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. :)
Related
I am new to both React-JS and Oboe.js. I am trying to speed up loading of some JSON data by using Oboe to stream the results. Unfortunately I am unable to do an update state in the function block. So I try to call another function that does the stateSet. Below is a method I have tried but doesn't work. It errors out a mapping function that uses search-results to render it in a table.
var that = this;
oboe({
url: //url,
method: 'POST', // optional
body: //POST-DATA, // optional
})
.on('node', '*', function(things){
that.updateState(things);
// This callback will be called everytime a new object is
// found in the foods array.
console.log( 'Go eat some', things.id);
});
updateState = (props) => {
this.setState({search-result: props});
}
What I am not sure about is the right way of updating a state with oboe.js and React?
Is there a better library to use for streaming JSON data into React?
Recommended approach
If you have the ability to change things server-side, then I would not recommend using Oboe for this. Oboe is useful if your only alternative is to load a large JSON object and you would like to access that data before the whole thing can be parsed.
The best way to optimize loading a lot of data on a client is to send less data at a time and to make multiple requests. A web-socket is the best approach, and Socket.io is a good tool for doing that.
If you need to use Oboe
I'm working to put together an example of oboe.js + react for you to look at, though it's tricky as much of the activity of Oboe happens outside the React lifecyle. I'll update this answer with that example 👍
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(...);
As a preface, I'm still new to React, so I'm still fumbling my way through things.
What I have is a component that fetches data to render an HTML table. So I call my Actions' fetchData() (which uses the browser's fetch() API) from within componentWillMount(), which also has a listener for a Store change. This all works well and good, and I'm able to retrieve and render data.
Now the next step. I want to be able to fetch new data when the component's props is updated. But I'm not exactly sure what the proper way to do so is. So I have a three part question
Would the proper place to do my fetchData() on new props be in componentWillReceiveProps(), after validating that the props did change, of course?
My API is rather slow, so it's entirely possible a new prop comes in while a fetch is still running. Is it possible to cancel the old fetch and start a new one, or at least implement logic to ignore the original result and wait for the results from the newer fetch?
Related to the above question, is there a way to ensure only one fetch is running at any time besides having something like an isLoading boolean in my Action's state (or elsewhere)?
Yes, componentWillReceiveProps is the proper place to do that.
Regarding point 2 and 3:
The idea of cancelling the task and maintaining 'one fetch running' seems to be inadequate. I don't think this kind of solution should be used in any system because implementation would limit an efficiency of your app by design.
Is it possible to cancel the old fetch and start a new one, or at least implement logic to ignore the original result and wait for the results from the newer fetch?
Why don't you let a 'newer fetch' response override an 'old fetch' response?
If you really want to avoid displaying the old response you can implement it simply using a counter of all fetchData calls. You can implement it in this way:
var ApiClient = {
processing: 0,
fetchData: function(){
processing++
return yourLibForHTTPCall.get('http://endpoint').then(function (response)){
processing--
return response
}
},
isIdle: function(){
return processing == 0
}
}
and the place where you actually make a call:
apiClient.fetchData(function(response){
if(apiClient.isIdle()){
this.setState({
})
}
}
I hope yourLibForHTTPCall.get returns a Promise in your case.
I am new to angular and I am building an app where I want to make multiple API calls and update the view as the data from them comes by. I do not want to wait for all the api calls to be completed to update my view and my api calls are not dependent on each other. Some of the API calls takes more than a minute to return the data.
I was thinking of using $q.all since I can start multiple asynchronous tasks, but I can't update the view after each one is completed. Could someone please point out how I can build this ?
Should I just use $scope.$apply in the success block of my $http call ?
My progress so far LINK (this was different issue I had, but the code is the same)
It's a bit hard to understand your model and what you're trying to achieve from you question, but you might want to use something like $broadcast() and $on().
So you'd broadcast an event when you're API has finished downloading:
$scope.$broadcast('API-download', data);
and then listen for it elsewhere and update your view
$scope.$on(
'API-download',
function(data){
processData( data );
}
)
That syntax might not be perfect, and as you have multiple API calls you'll need to broadcast different events like 'API-product-download' and 'API-catalogue-download'
I have an AJAX form which is validated by AJAX callback function. Everything is done using Drupal API. But I don't want to use standard mechanism of appending/prepending/replacing of DOM elements when callback happens. How to catch that AJAX response and react on it with my custom function?
You can try defining a behavior. In many situations, including an AJAX request, Drupal will call to "attachBehaviors" that will trigger your behavior too:
Drupal.behaviors.mybehavior = {
attach: function (context, settings) {
console.log(context);
}
};
You must check and inspect context to know if it's the right context what are you looking for