I have common module on my app that retrieves data from remote server and have get
methods to export the retrieved data to other modules.
Lets assume that this module's name is MyData
:
define([], function(){
return function(opts) {
var data = null;
// go get data with ajax
var getData = function(){
$.ajax("getData").done(function(response){
data = response;
});
};
getData();
// return public api
if (arguments.length !== 0) {
var method = arguments[0];
switch (method) {
case "get": return data;
}
};
};
});
The problem is when I define other modules that use MyData
, everytime it would create a new instance of MyData
, causing it to retrieve the data from the server each time.
I could use web storage (or other global variable) to store the returned data, but it seems like a bad solution.
Is there any way to force RequireJS to create only once instance?
P.S:
In my project I user KnockoutJS, and the data
variable is an ko.observable, so maybe knockout has a solution for my situation?
RequireJS already loads each module once. You just need to restructure your code a bit:
// myModule.js
define(function() {
// The dataFetch Promise will be initialized when this module
// is loaded for the first time.
var dataFetch = $.ajax("getData");
return {
getData: function () {
// Return the Promise interface and let callers use the
// .done, .fail etc. methods on it
return dataFetch;
}
};
});
Usage:
define([ "myModule" ], function (myModule) {
myModule.getData().done(function (data) {
// use the data
});
});
By using the Promise interface returned by $.ajax
, you can ensure asynch access to data that's fetched only once.
BTW, perhaps the pattern that you're trying to implement is a Model.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With