My application has several resources that need to be loaded just once, and used often afterwards.<\/p>\n
Here is a pattern that I’m finding quite useful lately:<\/p>\n
\/** \r\n * Retrieve the resource once only.\r\n * If the resource hasn't been loaded yet, \r\n * return a deferred that resolves to the resource.\r\n * If the resource has been loaded, \r\n * return the resource directly.\r\n *\/ \r\nApp.getResource = function() {\r\n \/\/Return the resource or the deferred if it's set already\r\n if (App._resource) \r\n return App._resource; \r\n \/\/Otherwise build, set and return a deferred that \r\n \/\/replaces itself when it's finished loading\r\n else\r\n return App._resource = $.getJSON("resource\/url").then(\r\n function(data) {\r\n console.debug("Loaded resource");\r\n return App._resource = data;\r\n }\r\n );\r\n};<\/pre>\nTo use directly;<\/p>\n
$.when(App.getResource()).done(function(resource) {\r\n \/\/Use the parameter from the promise\r\n resource.doStuff();\r\n});<\/pre>\nThe $.when call transparently converts a non-promise into a resolved promise with that value. The snippet behaves the same whether App.getResource() has been previously loaded or not.<\/p>\n
\nSo why replace the promise at all? Sometimes you need to be able to treat the resource like a synchronous value, such as within a library or a function that is called synchronously.<\/p>\n
\/\/Here's a class with a synchronously-called function\r\nvar Model = Backbone.Model.extend({\r\n ...\r\n validate: function(attrs) {\r\n if (App.getResource().exists(attrs[id])) {\r\n return "Model with that id already exists";\r\n } else {\r\n return null;\r\n }\r\n }\r\n});\r\nvar model = new Model();\r\n\r\n\/\/Wait for everything necessary to load first.\r\n$.when(App.getResource(), model.fetch(), ...).done(\r\n function() {\r\n if (model.isValid()) doFoo();\r\n else doBar();\r\n });<\/pre>\nThis code waits for App.getResource() to resolve, as well as for any other needed promises.\u00a0Afterwards, App.getResource() can just be treated like a synchronous function.<\/p>\n
\nThis pattern enables flexible and transparent use of remote resources, in both synchronous and asynchronous ways.<\/p>\n
The App.getResource() function is also quite similar to a Lazy Promise<\/strong>, as discussed by James Coglan<\/a>.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
My application has several resources that need to be loaded just once, and used often afterwards. Here is a pattern that I’m finding quite useful lately: \/** * Retrieve the resource once only. * If the resource hasn't been loaded … Continue reading