As mentioned earlier, we will need to build two views. The first view is named ItemView, and will be used to render a single button to the DOM. As such, it is tied to a single ItemModel in our collection. Let's take a look at this ItemView class, as follows:

class ItemView extends Backbone.View<ItemModel> { 
    template: (json: any, options?: any) => string; 
    constructor( 
        options = <Backbone.ViewOptions<ItemModel>>{} 
    ) { 
        options.events = { 'click': 'onClicked' }; 
        super(options); 
 
        let templateSnippet = $(`#itemViewTemplate`).html(); 
            this.template = _.template(templateSnippet); 
        _.bindAll(this, 'onClicked'); 
    } 
    render() { 
        this.$el.html( 
            this.template(this.model.attributes) 
        ); 
        return this; 
    } 
    onClicked() { 
        EventBus.Bus.trigger("item_clicked", this.model.attributes); 
    } 
} 

Our ItemView class derives from Backbone.View, and uses generic syntax to strongly type the Model used by this view to the ItemModel class that we built earlier. The constructor function takes an optional argument named options that is of  type Backbone.ViewOptions<ItemModel>, which is also set to an empty object {} by default. We can refer to the Backbone definition file to see what options can be sent through in this property.

Note that we have defined a property named template for this class, and defined the type of the template property to be a function that takes two properties and returns a string. This is necessary in order to set the template property of the view, as the standard definition file for a Backbone.View has the template property commented out.

Our constructor function starts by setting the events property on the options object. The events property is used by the view to react to certain DOM events, such as keydown or keyup, or click. Each of these events will trigger a function on the view, which, in this case, is the onClicked function. Once these options have been configured, our constructor passes this options object down to the base Backbone.View through the super call.

The constructor then sets up the template property of the class, which houses the HTML that this class will use to render to the screen. Note that we are using jQuery syntax to extract the HTML of the DOM element with an id of itemViewTemplate to be used as our HTML template. Our HTML page, therefore, will then need to include the following script in order for Backbone to be able to pick up this template:

<script type="text/template" id="itemViewTemplate"> 
    <button style="margin: 5px;" class="btn btn-primary" > 
        <%= DisplayName %> 
    </button> 
    <br/> 
</script> 

Here, we have defined a <script> tag within our HTML that is of the "text/template" type and has an id property of itemViewTemplate. Within this script, we define a <button> element with a style property and a class property. Note that Backbone uses Underscore's templating engine by default. In order to render a Model's property into the HTML, we use the <%= PropertyName %> syntax within the template. This means that <%= DisplayName %> will substitute the property named DisplayName from our model into the resultant HTML.

Our ItemView class then defines a render function. This render function calls the html function of the $el internal property, and passes in the result of calling the template function with the attributes property of the internal model. This attributes property is, in fact, a simple object with all of the properties of the internal model. This single call will take the Backbone model, merge it with the HTML template, generate the resultant HTML, and then update the DOM. Note that it also returns this, so that any code that uses it can chain commands onto the render function.

The final function of our ItemView class is the onClicked function, which will be invoked when the button that is rendered to the DOM is clicked. Backbone provides us with a very simple message bus that can be used for classes to notify each other when particular events happen. In order to use this event bus, we will create a very simple TypeScript class that has a static function through which we either fire events, or listen to events, as follows:

class EventBus { 
    static Bus = _.extend({}, Backbone.Events); 
} 

This class, named EventBus, has a single static property named Bus that uses the underscore extend function to combine a blank JavaScript object {} with the Backbone.Events object. This is all that is required to include a fully-fledged event bus within our Backbone application.

Firing an appropriate event from the onClicked function then simply becomes the following:

onClicked() { 
    EventBus.Bus.trigger("item_clicked", this.model.attributes);   
} 

Here, we are firing an event named item_clicked, and attaching the attributes property of the model that was used within our ItemView as a parameter to the trigger function.