title: Backbone.Marionette TemplateHelpers: access data stored outside the model
body: <h1>The problem:</h1>
  <p>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.</p>
  <p>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:</p>
  <pre><code>Uncaught ReferenceError: errors is not defined
  </code></pre>
  <p>The relevant code is as follows:</p>
  <h3>The view:</h3>
  <pre><code>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, &quot;loadUser:fail&quot;, this.onLoadUserFail, this);
    },
  
    ...
  
    onLoadUserFail: function() {
      alert('Access Denied!');
      this.errors.push('Your login credentials are invalid. Please try again.');
      this.render();
    }
  });
  </code></pre>
  <p>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.</p>
  <h3>The template:</h3>
  <pre><code>&lt;script type=&quot;text/template&quot; id=&quot;login-form-template&quot;&gt;
    &lt;form class=&quot;form-vertical well well-shadow span4&quot;&gt;
  
      ...
  
      &lt;% if(errors) { %&gt;
        &lt;fieldset class=&quot;alert alert-error&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;×&lt;/button&gt;
          &lt;legend&gt;Oops!&lt;/legend&gt;
          &lt;ul&gt;
            &lt;% _.each(errors, function(error) { %&gt;
              &lt;li&gt;&lt;%= error %&gt;&lt;/li&gt;
            &lt;% }); %&gt;
          &lt;/ul&gt;
        &lt;/fieldset&gt;
      &lt;% } %&gt;
  
      ...
  
    &lt;/form&gt;
  &lt;/script&gt;
  </code></pre>
  <p>It seems the errors don't find their way into the template because the error gets thrown in the template at:</p>
  <pre><code>&lt;% if(errors) { %&gt;
  </code></pre>
  <p>Looking at the Backbone.Marionette source I was under the impression that the templateHelpers method gets executed, and its output merged with the &quot;data&quot; object (the serialized model).</p>
  <p>If that's the case, how come I can access properties of my model, but the 'errors' property is undefined?</p>
  <h1>The solution:</h1>
  <p><a href="https://stackoverflow.com/users/60737/jsoverson">joverson</a> was kind enough to point out the problem. My new templateHelpers method now looks like as follows:</p>
  <pre><code>errors: [],
  templateHelpers: function() {
    console.log('LoginFormView.templateHelpers', this, this.errors);
    var output = {};
    output.errors = this.errors;
    return output;
  },
  </code></pre>