Handlebars If statement inside each loses context
ember.js, handlebars.js, javascript
Solution
uppercase properties are generally considered global properties, if you're going to use them you should fully qualify them. This is more than likely the problem you're running into
{{#each branch in branches}}
<tr>
<td>{{branch.Id}}</td>
<td>{{branch.Name}}</td>
<td>
{{#link-to 'branch.edit' branch.ProviderId branch.Id tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-pencil"></span> Edit{{/link-to}}
{{#if branch.AvailabilityId}}
{{#link-to 'availability.edit' branch.AvailabilityId tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-pencil"></span>{{/link-to}}
{{else}}
{{#link-to 'availability.add_for_branch' branch.Id tagName='button' class='btn btn-success' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-plus"></span>{{/link-to}}
{{/if}}
</td>
</tr>
{{/each}}
Problem
I have a Handlebars template, which is used inside EmberJS as a template for a certain Route. The Route provides a model like this: ``` { "Id": 50, "UserId": 2, "Name": "sdfq", "UserFullName": "Bla bla", "branches": [ {"Id": 2, "Name": "Test branch23", "ProviderId": 50, "AvailabilityId": 1}, {"Id": 3, "Name": "Branch nr 21", "ProviderId": 50, "AvailabilityId": null} ] } ``` For this model I render a template like this: ``` <table class="table table-bordered "> <thead> <tr class="active"> <th>{{language 'Id'}}</th> <th>{{language 'Name'}}</th> <th></th> </tr> </thead> {{#each branches}} <tr> <td>{{Id}}</td> <td>{{Name}}</td> <td> {{#link-to 'branch.edit' ProviderId Id tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-pencil"></span> Edit{{/link-to}} {{#if AvailabilityId}} {{#link-to 'availability.edit' AvailabilityId tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-pencil"></span>{{/link-to}} {{else}} {{#link-to 'availability.add_for_branch' ../Id tagName='button' class='btn btn-success' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-plus"></span>{{/link-to}} {{/if}} </td> </tr> {{/each}} </table> ``` Everything renders fine for the first time and correct links are shown for correct rows. Now when I try to click a link `availability.edit` I get an error Uncaught TypeError: Cannot read property 'AvailabilityId' of undefined If i track down the error then it leads to nothing related to my code (an jQuery internal function). ``` Uncaught TypeError: Cannot read property 'AvailabilityId' of undefined ember-1.3.1.js:3936 ChainNodePrototype.unchain ember-1.3.1.js:3936 ChainNodePrototype.remove ember-1.3.1.js:3914 Ember.unwatchPath ember-1.3.1.js:4087 Ember.unwatch ember-1.3.1.js:4156 Ember.removeObserver ember-1.3.1.js:5406 (anonymous function) ember-1.3.1.js:23856 sendEvent ember-1.3.1.js:2351 Ember.Evented.Ember.Mixin.create.trigger ember-1.3.1.js:17629 Ember.CoreView.Ember.Object.extend.trigger ember-1.3.1.js:21769 superWrapper ember-1.3.1.js:1230 ViewCollection.trigger ember-1.3.1.js:21834 Ember.View.Ember.CoreView.extend._notifyWillDestroyElement ember-1.3.1.js:23348 Ember.merge.destroyElement ember-1.3.1.js:24337 Ember.View.Ember.CoreView.extend.destroyElement ember-1.3.1.js:23323 superWrapper ember-1.3.1.js:1230 Ember.CoreView.Ember.Object.extend.destroy ember-1.3.1.js:21803 superWrapper ember-1.3.1.js:1230 Ember.View.Ember.CoreView.extend.destroy ember-1.3.1.js:23657 superWrapper ember-1.3.1.js:1230 (anonymous function) ember-1.3.1.js:24782 sendEvent ember-1.3.1.js:2351 notifyBeforeObservers ember-1.3.1.js:2723 propertyWillChange ember-1.3.1.js:2549 set ember-1.3.1.js:2815 Ember.trySet ember-1.3.1.js:2884 (anonymous function) ember-1.3.1.js:6894 tryable ember-1.3.1.js:2245 Ember.tryFinally ember-1.3.1.js:1412 suspendListener ember-1.3.1.js:2248 Ember._suspendObserver ember-1.3.1.js:5435 Binding._sync ember-1.3.1.js:6893 DeferredActionQueues.flush ember-1.3.1.js:5650 Backburner.end ember-1.3.1.js:5741 Backburner.run ember-1.3.1.js:5780 Ember.run ember-1.3.1.js:6181 Ember.EventDispatcher.Ember.Object.extend._bubbleEvent ember-1.3.1.js:21515 handleViewEvent ember-1.3.1.js:21459 Ember.handleErrors ember-1.3.1.js:899 (anonymous function) ember-1.3.1.js:21450 jQuery.event.dispatch jquery-1.10.2.js:5095 jQuery.event.add.elemData.handle jquery-1.10.2.js:4766 ``` If i remove the if statement `{{#if AvailabilityId}}` and display two links all the time, they work fine. I have tried modifying the scope by using: ``` {{#link-to 'availability.edit' ../AvailabilityId tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-pencil"></span>{{/link-to}} ``` But it does not seem to have any little effect, even ../../ had no effect (Which leads all suspicions to the if block, which is probably causing the error). Any hints are welcome.