Backbone.Marionette TemplateHelpers: access data stored outside the model - marionette

Question

The problem:
I'm trying to make a form which can display error messages on individual form elements as well as at the top of the form.
I would like to be able to store the errors somewhere outside the model. By default, if i'm not mistaken, only the models attributes get included in the template. So I'm trying to add the errors using template helpers. So far, It doesn't work and breaks with the following error:
Uncaught ReferenceError: errors is not defined
The relevant code is as follows:
The view:
var LoginFormView = Marionette.ItemView.extend({
// some view properties
...
errors: [],
templateHelpers: function() {
console.log('LoginFormView.templateHelpers',this, this.errors);
var output = {};
if(this.errors.length) {
output.errors = this.errors;
}
return output;
},
initialize: function(currentUser, options) {
// some initialization
...
this.bindTo(this.model, "loadUser:fail", this.onLoadUserFail, this);
},
...
onLoadUserFail: function() {
alert('Access Denied!');
this.errors.push('Your login credentials are invalid. Please try again.');
this.render();
}
});
The LoginFormView object is just a module definition. It gets instantiated later on and injected into a Backbone.Marionette.Region. I'm not sure if this has anything to do with the problems I'm having, but I figured I'd mention it just in case.
The template:
<script type="text/template" id="login-form-template">
<form class="form-vertical well well-shadow span4">
...
<% if(errors) { %>
<fieldset class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<legend>Oops!</legend>
<ul>
<% _.each(errors, function(error) { %>
<li><%= error %></li>
<% }); %>
</ul>
</fieldset>
<% } %>
...
</form>
</script>
It seems the errors don't find their way into the template because the error gets thrown in the template at:
<% if(errors) { %>
Looking at the Backbone.Marionette source I was under the impression that the templateHelpers method gets executed, and its output merged with the "data" object (the serialized model).
If that's the case, how come I can access properties of my model, but the 'errors' property is undefined?
The solution:
joverson was kind enough to point out the problem. My new templateHelpers method now looks like as follows:
errors: [],
templateHelpers: function() {
console.log('LoginFormView.templateHelpers', this, this.errors);
var output = {};
output.errors = this.errors;
return output;
},

Answer 1

When this view is shown via a Marionette Region with show(), it will call the render() method on your view almost immediately. Since the errors property of your template data doesn't get populated until your view's errors array has items in it, errors will be undefined in the template.
If you remove the check for errors and just pass through an empty array so it is at least defined, you should be able to do the existence check in the template for the same effect.