Now that we have the base Backbone application up and running, we can make a few tweaks to include a form at the bottom of the page, and show how to get and set form values within our View. This form will be handled by the ItemCollectionView class and, as such, we will need to update our model with a new property, as follows:

class ItemCollectionViewModel extends Backbone.Model 
    implements IItemCollectionViewModel { 
 
    ... existing properties  
 
    set Name(value: string) { 
        this.set('Name', value); 
    } 
    get Name() { 
        return this.get('name'); 
    } 
 
    ... existing constructor 
 
} 

Here, we have simply added a matching pair of ES5 get and set functions to store and retrieve our Name property. Once this change is made, we will also need to set this property when we create the ItemCollectionViewModel itself. This code is found in the app.ts file, in the start function, as follows:

class ScreenViewApp { 
    start() { 
    ... existing code 
 
        let collectionItemViewModel = new ItemCollectionViewModel({ 
            Title: "Please select :", 
            SelectedItem: { 
                Id: 0, DisplayName: 'None Selected:' 
            }, 
            Name: "Your Name" 
        }); 
 
        ... existing code 
    } 
} 

Here, we have updated the start function of the ScreenViewApp class to include the Name property when we create the ItemCollectionViewModel. This property will default to the value "Your Name".

The next modification to our code will be the template itself, within the index.html file as follows:

<script type="text/template" id="itemCollectionViewtemplate"> 
    ... existing HTML template 
 
    <div class="form-group"> 
        <label for="inputName">Name :</label> 
        <input type="text" class="form-control input-name"  
            id="inputName" value="<%= Name %>" /> 
    </div> 
     
    <button id="submit-button-button"  
   class="submit-button">Submit</button> 
     
</script> 

Here, we have updated the itemCollectionViewTemplate HTML template by including a <div> tag with the bootstrap style of form-group. Within this <div> tag, we have added a <label> tag, and an <input> tag with a type of "text". Note how we have also added an id="inputName" attribute so that we can refer to this input element by id. Finally, we have added a <button> tag with an id of "submit-button-button", and a bootstrap class of "submit-button".

With the template modifications done, we will now need to trap the event where a user clicks on the submit button, so that we can interrogate the value that the user has entered into the form. This is very similar to the way that we attached a function to the click event on each of our buttons. We will update our ItemCollectionView as follows:

class ItemCollectionView extends Backbone.View<ItemCollectionViewModel> { 
    template: (json: any, options?: any) => string; 
    itemCollection: ItemCollection; 
 
    constructor( 
        options: Backbone.ViewOptions<ItemCollectionViewModel> = {}, 
        _itemCollection: ItemCollection)  
    { 
        options.events = { 'click #submit-button-button': 'submitClick' } 
        super(options); 
         
        ... existing code 
    } 
    submitClick() { 
        let name = this.$el.find('#inputName'); 
        if (name.length > 0) { 
            console.log(`name : ${name.val()}`); 
        } else { 
            console.log(`cannot find #inputName`); 
        } 
    } 
} 

There are two modifications that we have made to the ItemCollectionView class. Firstly, we have added an events property to the options argument on the first line of the constructor function. This is very similar to the way that we trapped the click event on the ItemView earlier. Here, however, we have defined that the click event we are interested in is on the element with an id of submit-button-button. Backbone is using standard JQuery syntax here by using the syntax #submit-button-button. When this event fires, we will handle it with the function named submitClick.

Our submitClick function starts by finding an element that is attached to the view by calling the this.$el.find function. Remember that we can reference the DOM within our view by accessing the $el property. The find function is also using JQuery syntax to locate a DOM element with the id of inputName, which is, in fact, our input field. If we find an element with this id property, then we are extracting the user-entered value of this field by calling the val() function.

The following screenshot shows the result of updating the form and clicking the Submit button:

And that is the basics of working with form data in Backbone. As we have seen, we can use the values of a Backbone model in our HTML templates just like any other model property. We can also respond to click events on a particular DOM element by referencing it by its id property. When a form is submitted, we can extract the values of a form element by interrogating its value using JQuery.