From the Backbone documentation, we find an example of creating a Backbone.Model class in JavaScript, as follows:
var NoteModel = Backbone.Model.extend ({
initialize: function() {
console.log("NoteModel initialized.");
},
author: function() {},
coordinates : function() {},
allowedToEdit: function(account) {
return true;
}
});
This code shows typical usage of Backbone in JavaScript. We start by creating a variable named NoteModel that extends (or derives from) Backbone.Model. This can be seen with the Backbone.Model.extend syntax. The Backbone extend function uses JavaScript object notation to define an object within the outer curly braces { ... }. In this example, the NoteModel object has four functions: initialize, author, coordinates, and allowedToEdit.
According to the Backbone documentation, the initialize function will be called once a new instance of this class is created. In our sample, the initialize function simply logs a message to the console to indicate that the function was called. The author and coordinates functions are blank at this stage, with only the allowedToEdit function actually doing something—return true.
If we then right-click on the extend function, and then select the Goto Definition option from Visual Studio Code, we will be directed to the definition file for Backbone. Here, we see an interesting piece of documentation for this function, as follows:
class Model extends ModelBase {
/**
* Do not use, prefer TypeScript's extend functionality.
**/
public static extend(properties: any, classProperties?: any): any;
This declaration file snippet shows some of the definition of the Backbone Model class. Here, we can see that the extend function is defined as public static. Note, however, the comment in the code block—Do not use, prefer TypeScript's extend functionality.
This comment indicates that the declaration file for Backbone is built around TypeScript's extends keyword—thereby allowing us to use natural TypeScript inheritance syntax to create Backbone objects. Let's therefore clean up our code to use the extends TypeScript keyword to derive a class from the base class Backbone.Model, as follows:
class NoteModel extends Backbone.Model {
initialize() {
console.log(`NoteModel initialized`);
}
author() {}
coordinates() {}
allowedToEdit(account: any) : boolean {
return true;
}
}
We are now creating a class definition named NoteModel that uses the TypeScript inheritance syntax to derive a class from the Backbone.Model base class. This class then has the functions initialize, author, coordinates, and allowedToEdit, similar to the previous version of JavaScript.
Let's now create an instance of the NoteModel object by creating an HTML page, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./node_modules/underscore/underscore.js">
</script>
<script src="./node_modules/backbone/backbone.js"></script>
<script src="./backbone_app.js"></script>
</head>
<body>
<script >
window.onload = function() {
console.log('window.onload called');
var noteModel = new NoteModel();
};
</script>
</body>
</html>
Here, we have a standard HTML page that includes both the backbone.js file, and the underscore.js file (Backbone is dependent on Underscore). We then include our backbone_app.js file which contains the definition of the NoteModel class. We then have a <script> tag that will execute a function when the page loads. Within this function, we are creating an instance of the NoteModel class. According to the documentation, the initialize function of a Backbone Model will be called by Backbone when an instance of a Model class has been created. Checking the console output of this page, we will see the following messages:
window.onload called NoteModel initialized
The output to the console shows us that the window.onload function was indeed called, and that we have successfully instantiated an instance of a Backbone model.
All of Backbone's core objects are designed with inheritance in mind. This means that creating new Backbone collections, views, and routers will use the same extends syntax in TypeScript. Backbone, therefore, is a very good fit for TypeScript, because we can use natural TypeScript syntax for inheritance to create new Backbone objects.