HTML5 Web Application Development By Example Beginner's guide

Time for action – implementing the bindings

Let's head back over to the task template in our HTML file and add some custom data attributes. We'll add custom attributes to all of the task details <input> and <select> elements. The data attribute name will be data-field, and the attribute value will be the name of the field the element matches to in the Task object. We will use those attributes later in our JavaScript to hook the DOM elements and data model together:

<div class="details">
    <label>Start date:</label>
    <input type="date" data-field="startDate"/><br/>
    <label>Due date:</label>
    <input type="date" data-field="dueDate"/><br/>
    <label>Status:</label>
    <select data-field="status"> <!— options removed... --> </select><br/> <label>Priority:</label> ...