Search⌘ K
Home/
Courses/
Introduction to Marionette.js – The Backbone Framework

Editing a Contact

Learn how to create a separate view to edit contact details.

We'll cover the following...

Let’s create a dedicated view to edit a contact. The entire process is very similar to what we saw when displaying a contact, so we’ll go over the steps quite quickly.

Create a view

We’ll start by creating the new template styled with Bootstrap:

PHP
<script type="text/template" id="contact-form"> 
    <h1>Edit <%- firstName %> <%- lastName %></h1> 
    <form>
        <div class="control-group">
            <label for="contact-firstName" class="control-label">
                First name:</label>
            <input id="contact-firstName" name="firstName"
                type="text" value="<%- firstName %>"/> 
        </div>
        <div class="control-group">
            <label for="contact-lastName" class="control-label">
                Last name:</label>
            <input id="contact-lastName" name="lastName"
                type="text" value="<%- lastName %>"/> 
        </div>
        <div class="control-group">
            <label for="contact-phoneNumber" class="control-label">
                Phone number:</label>
            <input id="contact-phoneNumber" name="phoneNumber"
                type="text" value="<%- phoneNumber %>"/> 
        </div>
        <button class="btn js-submit">Save</button> 
    </form>
</script>

...