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> <select data-field="priority"> <!— options removed... --> <...