#if statement throws TypeError: node is undefined

Question

Consider the below snippet in Handlebar written for Ember.js:

<script type="text/x-handlebars" id="courses/selectedCourse">
    <div id="selectedCourse">

    {{#if IsRegistered}}
        <div class="XX">
            Registered for the course
        </div>
        {{else}}
            <div class="YY">
                <button {{action registerForCourse}}>Register</button>
            </div>
     {{/if}}

        <h1>{{courseTitle}}</h1>            
        <div class="selectedCourseItem">            
            <img id="selectedCourse" {{bindAttr src="imageUrl"}}/>
        </div>

    </div>
</script>

Issue1 : Content is not getting refreshed immediately after Registering for a course.

Issue2 : On changing the selected courses couple of times, the content is displayed twice and overlapping.

Following is the message I see in FireBug:

TypeError: node is undefined

[Break On This Error]

node.unchain(key, path);

If I remove the #if statement, everything works well.

What am I doing wrong?

score 3 · Answer 1 · answered Sep 27 '13 at 11:02

3

I had a similar issue and fixed it by making the first letter of the argument in the if statement lower case

{{#if isRegistered}}

answered Sep 27 '13 at 11:02

scotta7exander

383
4
11

Remarkably, I had the same issue with a first-char uppercase variable. Making the first letter lowercase fixed the issue. Madness! – JamesG Mar 21 '14 at 17:32

score 0 · Answer 2 · answered Aug 05 '14 at 07:19

Ember is making an assumption based on convention that the capitalized property name indicates global scope. You have the option of modifying your variable name to be lowercase, or qualifying the reference. If the property is on your model, for example, you can use

{{#if model.isRegistered}}

to avoid this error.

#if statement throws TypeError: node is undefined

2 Answers2