Backbone ModelBinder, not filling when model is fetched - backbone.js

Question

Maybe I'm using model binder incorrectly or maybe marionette interferes, but my view and model don't seem to be communicating and therefore not pre-filling my template fields
View
define([
'marionette',
'underscore',
'text!app/views/templates/user/form.html',
'app/models/user'
],
function (Marionette, _, Template, Model) {
"use strict"
return Marionette.ItemView.extend({
events: {
'submit .edit-user-form': 'onClickSave'
},
initialize: function(options) {
/* initiate model binder */
Backbone.ModelBinder.bind(Model, this.$el)
/* create empty model in case its a create request */
this.model = new Model()
/* if the options.id is passed then lets load an instance of the model */
if (options && options.id) {
this.model = new Model({id: options.id})
this.model.set('id', options.id)
/* set that to this so its acceptable inside the fetch */
var that = this
this.model.fetch({
/* fetch request successful */
success: function (response) {
/* set the model instance trigger a re-render */
that.model = response
that.render()
},
/* we couldn't load the model so we go back to the users list */
error: function () {
alert('User could not be loaded, redirecting you to the users list')
window.location.hash = 'users'
}
})
}
},
/* save button triggered so prevent default and trigger the model to save */
onClickSave: function (ev) {
ev.preventDefault()
this.model.save({}, {
success: function (response) {
console.log(response, 'response')
}
})
},
/* render the form */
render: function () {
var html = _.template($(Template).html(), this.model.toJSON())
this.$el.html(html)
return this
}
})
}
)
Template
<script type="text/template" id="userFormTemplate">
<div id="userForm">
<h2><img src="/img/icons/32/update.png" /> Update User</h2>
<h2><img src="/img/icons/32/create.png" /> Create New User</h2>
<form class="edit-user-form">
<fieldset name="personal" class="halfWidth left">
<legend>Personal Details:</legend>
<div class="control-group">
<label class="control-label">First name:</label>
<div class="controls">
<input type="text" name="first_name" id="first_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Last name:</label>
<div class="controls">
<input type="text" name="last_name" id="last_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Birthdate:</label>
<div class="controls">
<input type="date" name="birthdate" id="birthdate">
</div>
</div>
</fieldset>
<fieldset name="job" class="halfWidth right">
<legend>Job Details:</legend>
<div class="control-group">
<label class="control-label">Job Title</label>
<div class="controls">
<input type="text" name="job_title" id="job_title">
</div>
</div>
<div class="control-group">
<label class="control-label">Start Date:</label>
<div class="controls">
<input type="date" name="job_start_date" id="job_start_date">
</div>
</div>
<div class="control-group">
<label class="control-label">Probation Ends:</label>
<div class="controls">
<input type="date" name="job_probation_ends" id="job_probation_ends">
</div>
</div>
</fieldset>
<div class="clearfix"></div>
<br />
<fieldset name="personal" class="halfWidth left">
<legend>Work Details:</legend>
<div class="control-group">
<label class="control-label">Work Email</label>
<div class="controls">
<input type="email" name="work_email" id="work_email">
</div>
</div>
<div class="control-group">
<label class="control-label">Work Address:</label>
<div class="controls">
<input type="text" name="work_address" id="work_address">
</div>
</div>
<div class="control-group">
<label class="control-label">Work Phone Number:</label>
<div class="controls">
<input type="text" name="work_phone_number" id="work_phone_number">
</div>
</div>
</fieldset>
<fieldset name="personal" class="halfWidth right">
<legend>Personal Details:</legend>
<div class="control-group">
<label class="control-label">Personal Email</label>
<div class="controls">
<input type="email" name="personal_email" id="personal_email">
</div>
</div>
<div class="control-group">
<label class="control-label">Home Address:</label>
<div class="controls">
<input type="text" name="personal_address" id="personal_address">
</div>
</div>
<div class="control-group">
<label class="control-label">Home Phone Number:</label>
<div class="controls">
<input type="text" name="personal_phone_number" id="personal_phone_number">
</div>
</div>
</fieldset>
<div class="clearfix"></div>
<br />
<div class="control-group button">
<button class="btn save-form btn-success" type="submit">Create User</button>
</div>
</form>
</div>
</script>

Answer 1

You have to define the bindings, its not automatic.
var bindings = {
first_name: '#first_name',
last_name: '#last_name',
birthdate: '#birthdate',
job_title: '#job_title',
job_start_date: '#job_start_date',
job_probation_ends: '#job_probation_ends',
work_email: '#work_email',
work_address: '#work_address',
work_phone_number: '#work_phone_number',
personal_email: '#personal_email',
personal_address: '#personal_address',
personal_phone_number: '#personal_phone_number'
}