Databases
StackOverflow2013
Postsdbo
POBackbone.Marionette TemplateHelpers: access data stored outside the model
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone.Marionette TemplateHelpers: access data stored outside the model
    text
    copied!<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, "loadUser:fail", 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="text/template" id="login-form-template"&gt; &lt;form class="form-vertical well well-shadow span4"&gt; ... &lt;% if(errors) { %&gt; &lt;fieldset class="alert alert-error"&gt; &lt;button type="button" class="close" data-dismiss="alert"&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 "data" 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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload