Having created two models, a collection of models, and two views, we will now create a controller to bind these elements together. Backbone, however, does not have a specialist controller class, but we can use a standard TypeScript class to accomplish the work of a controller. This class will be named ScreenViewApp, as follows:

class ScreenViewApp { 
    start() { 
        let itemCollection = 
            new ItemCollection(ClickableItems); 
 
        let collectionItemViewModel = new ItemCollectionViewModel({ 
            Title: "Please select :", 
            SelectedItem: { 
                Id: 0, DisplayName: 'None Selected:' 
            } 
        }); 
 
        let itemCollectionView = new ItemCollectionView( 
            { 
                model: collectionItemViewModel 
            }, itemCollection 
        ); 
 
        $(`#pageLayoutRegion`).html( 
            itemCollectionView.render().el 
        ); 
    } 
} 

Here, we have created a class named ScreenViewApp with a single start function. The body of the start function shows how we create the various elements that are used to render our application to the screen.

The start function first creates a new ItemCollection model from the ClickableItems array. It then sets up a new ItemCollectionViewModel with the Title and SelectedItem properties set to their initial defaults. We then create an instance of the ItemCollectionView class, with the required arguments. Note that the first argument is, in fact, an object with a single property named model, which is set to the instance of our collectionViewModel object. This is a Backbone convention, where we can create a Backbone view with a number of different properties in the constructor, including events, tagNames, classNames, and others. Again, refer to the documentation or the definition file for more options and their uses.

The final line of the start function simply calls the html function on the pageLayoutRegion DOM element to set the rendered HTML. Note that once a Backbone view has been rendered, the final HTML is placed within the el property of the view itself. With this class in place, we can then call the start function from our index.html page, as follows:

<script > 
    window.onload = function() { 
        app = new ScreenViewApp(); 
        app.start(); 
    } 
</script> 
 
<div id="pageLayoutRegion"> 
</div> 

Here, we create an instance of the ScreenViewApp class within the window.onload function, and then call start. Below this <script> tag, we have placed a <div> with the id of pageLayoutRegion, where the resultant HTML will be placed.