Handlebars If statement inside each loses context

Question

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.

Answer 1

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}}