Need help on caching http requests in a BackboneJS application. I'm using deferred which I think is from JQuery. The code I'm playing with is
this.someItem.fetch({timeout:60000, cache:true}).done(function() {
// do your stuff
console.log('testing ....');
}
);
But it's not working. I don't see (cached) in network tab once the exact url gets called again.
Are you using raw Backbone? I browsed a few pages and found that this feature is provdided if you require Backbone fetch plugin.
http://floatleft.com/notebook/backbone-fetch-cache/
Related
I am utilizing inAppBrowser and understand how to subscribe to event observable such as loadstart, loadstop etc. I am trying to figure out a solution for capturing the request made from within InAppBrowser instance previous to it being sent, similar to Angulars HTTPInterceptor feature when making crafted requests from within the app it's self.
As I understand it, loadstart has already committed to sending the request and all you can capture from this is the URL from within Ionic app.
As a solution I can executescript and utilize its callback to retrieve info about a request direct from the browser but this feels like a awkward solution.
Any alternate solutions or assistance would be greatly appreciated.
I want to load the YouTube Iframe API ( https://www.youtube.com/iframe_api ) using AngularJS' $http, but it seems that YouTube doesn't allow CORS requests.
The reason I want to load this API using XHR is that I have a fairly complex logic for API loading in my app, and I want to test it using $httpBackend. And if I load the script using a tag created from JS, I can't find any way of mocking it, and also it will actually execute the request each time I run the tests, which is not cool.
My other option is to create a local proxy, but I would like to avoid that at the current moment.
So, does anyone know any way of loading the YouTube Iframe API with XHR? Maybe setting an origin parameter to the request or something. Or maybe it already works but I'm missing something.
Does Backbone use etags when fetching changes from server ?
I mean, let's say that when the initial data is loaded, it saves their etags, then when it tries to fetch changes from server, does it send the etags in the header so it will not need to download the data that is up to date ?
I hope I was clear !
Backbone uses jQuery to do ajax requests. jQuery calls the native browser APIs. The browser APIs respect etags.
I would like to know what is the proper way to get data from backend when I want to use angularJs (or similar) in my web app?
The only way I see is to render html (static html with js scripts - e.g. angularjs) with no data from backend and then download data via ajax requests from my backend API. But I think this solution is not good because of many HTTP requests:
For example I have blog website, I want to show a post, comments, and the related posts on the sidebar. So probably I need to make at least 3 HTTP requests to get the data unless I will prepare API to get all I need in one request.
I can also imagine websites that could have much more HTTP requests. Is it a proper way to do this? Doesn't it overload a server? Or my way of thinking is so wrong?
It is either websockets or HTTP requests. Preparing API to get all in one request is one option. Another two options are XMLHttpRequest/iframe streaming which is a method of a technique known as Comet.
I would go with websockets since it is supposed to solve the problem that was previously solved with weird applications like iframe streaming. There are libraries that properly handles fallbacks if the browser does not support websockets:
web-socket-js ( this needs a websocket server )
Socket.IO ( this has a node.js module and also implements a kind of unnecessary protocol on top of websocket protocol )
If you choose the old methods there will be many problems waiting for you on the road like XmlHttpRequest.responseText while loading (readyState==3) in Chrome
I think you have to distinguish two cases:
You render the page for the first time.
You update parts of your page when something changes
Of course in the second case it makes sense to fetch only parts of the page via individual HTTP requests. However, in the first case you can simply serialize your complete model as one JSON object and embed it in the page like this:
<script type="text/javascript">
var myCompleteModel = { /* Here goes your model */ };
<script>
The controllers of the components on your page can then access this global variable to extract the parts being relevant for them. You can also wrap access to the initial model in a service to avoid accessing a global variable in all your controllers.
I try to make a single page app with Rails 3.2 and Backbone.js with pushState option but faced with something that I do not understand.
If I load the root URL of the app (/), everything goes right: Rails return an HTML-layout with JS which bootstraps Backbone which makes some XHRs for JSON-entities and renders the content.
But if I start using app from non-root URL (e.g. by manually typing it in the browser's address bar) then Rails will try to handle this request using theirs routing rules from routes.rb - that's wrong, cause it's a "Backbone's" route. How do I load the page and bootstrap Backbone for handling this URL in that case?
Finally I found the solution.
I put the following code into my routes.rb
class XHRConstraint
def matches?(request)
!request.xhr? && !(request.url =~ /\.json$/ && ::Rails.env == 'development')
end
end
match '(*url)' => 'home#index', :constraints => XHRConstraint.new
With this matcher all non-XHR requests are routed to HomeController which returns an HTML page. And XHR requests will be handled by other controllers which return JSON responses.
Also I left requests ending with ".json" as valid in development environment for debugging.
This is a somewhat tricky issue, but basically in a nutshell, you need to respond to all valid (HTML) requests in rails with the same (root) page, from there backbone will take over and route to the correct route handler (in your bakckbone router).
I've discussed this issue in more detail here: rails and backbone working together
Basically what I do is to create actions for every page that I want to handle, and blank views. I use respond_with to return the page (which is the same in each case) and because I handle GET actions only for HTML requests, I add this line at the top of the controller:
respond_to :html, :only => [ :show, :new ]
JSON requests are handled with respond_with as well, but unlike the HTML requests actually return the requested resource (and perform the requested action in the case of PUT, POST and DELETE).
Backbone will not be informed of your url change if you do it manually. This change will be catch by the browser and it will do its job sending the request to the server as usual.
Same if you click in a normal link, it will follow its href without inform Backbone.
If you want Backbone being in charge of a url change you have to do it through the Backbone tools you have available and this is the own Router.
So if you want to make an URL change in the Backbone way you have to do it explicitly, something like:
app.router.navigate("my/route", {trigger: true});