From my perspective, it seems that your primary queries include:
- How can we obtain an instance of the configuration model?
- How do we utilize the configuration model to set the dependent model's
url?
- How can we ensure that we do not use the
url function on the dependent model prematurely?
There are numerous approaches to tackle this issue, but I will propose some specific solutions to offer guidance and code for a smooth implementation.
My recommendation for addressing the initial challenge is to create the configuration model as a singleton. Below, I will include code snippets from the backbone-singleton GitHub page for reference.
var MakeBackboneSingleton = function (BackboneClass, options) { ... }
Subsequently, we establish a singleton named AppConfiguration and a deferred property utilizing jQuery. The outcome of fetch will provide callbacks such as always(callback) and done(callback).
var AppConfiguration = MakeBackboneSingleton(Backbone.Model.extend({
defaults: {
base: null
},
initialize: function() {
this.deferred = this.fetch();
},
url: function() {
return 'config.json'
}
}));
Next, we define the dependent model DependentModel, which mirrors your model. This model will invoke AppConfiguration() to acquire the instance.
Due to the implementation of MakeBackboneSingleton, the following statements hold true:
var instance1 = AppConfiguration();
var instance2 = new AppConfiguration();
instance1 === instance2; // true
instance1 === AppConfiguration() // true
The model will automatically initiate a fetch operation upon receiving an id, but only after the completion of the AppConfiguration's fetch. Various callbacks such as always, then, and done can be utilized.
var DependentModel = Backbone.Model.extend({
initialize: function() {
AppConfiguration().deferred.then(function() {
if (this.id)
this.fetch();
});
},
url: function() {
return AppConfiguration().get('base') + '/someEndpoint';
}
});
Finally, by integrating all components, you can instantiate models as follows:
var newModel = new DependentModel(); // no id => no fetch
var existingModel = new DependentModel({id: 15}); // id => fetch AFTER we have an AppConfiguration
The second instantiation will trigger an auto-fetch operation only if the AppConfiguration's fetch was successful.
Below is the implementation of MakeBackboneSingleton sourced from the GitHub repository:
var MakeBackboneSingleton = function (BackboneClass, options) {
options || (options = {});
// Helper to check for arguments. Throws an error if passed in.
var checkArguments = function (args) {
if (args.length) {
throw new Error('cannot pass arguments into an already instantiated singleton');
}
};
// Wrapper around the class. Allows us to call new without generating an error.
var WrappedClass = function() {
if (!BackboneClass.instance) {
// Proxy class that allows us to pass through all arguments on singleton instantiation.
var F = function (args) {
return BackboneClass.apply(this, args);
};
// Extend the given Backbone class with a function that sets the instance for future use.
BackboneClass = BackboneClass.extend({
__setInstance: function () {
BackboneClass.instance = this;
}
});
// Connect the proxy class to its counterpart class.
F.prototype = BackboneClass.prototype;
// Instantiate the proxy, passing through any arguments, then store the instance.
(new F(arguments.length ? arguments : options.arguments)).__setInstance();
}
else {
// Make sure we're not trying to instantiate it with arguments again.
checkArguments(arguments);
}
return BackboneClass.instance;
};
// Immediately instantiate the class.
if (options.instantiate) {
var instance = WrappedClass.apply(WrappedClass, options.arguments);
// Return the instantiated class wrapped in a function so we can call it with new without generating an error.
return function () {
checkArguments(arguments);
return instance;
};
}
else {
return WrappedClass;
}
};