“TypeError: chains is undefined ” when adding a handlebars if helper and navigating to homepage of app

Question

I have a handlebars template in my Ember app.

{{#if image}}
    <img src="{{unbound image}}" />
{{/if}}

The if statement is working correctly but it seems to be breaking when navigating back tot he homepage. I get this error when I go back to the index route.

TypeError: chains is undefined

ember.js (line 4177)
var chains = this._chains, node = chains[key];

When I remove the if conditional in my handlebars template. I no longer get the error and I can go back to the homepage with no issues.

I am using Ember JS Beta 1.5.0-beta.2, Handblebars 1.3.0 and jQuery 1.11.0.

It is really strange that the if conditional could break this, but I spent several hours trying to narrow it down and this is what I concluded to be the issue.

Answer 1

I saw the same issue when the property name in the {{if}} clause was starting with a capital letter.

I think the following issue discussion might be stating the root cause https://github.com/emberjs/ember.js/issues/1493

sly7-7 commented 2 years ago

I think this is because using Capitalize names in handlebars makes it to search for globals. When writing Foo.Bar, I think handlebars is trying to resolve the namespace Foo, then a class or property Bar.

Answer 2

I too have seen the same error. Following the hints from this thread, I concluded that it was indeed from the retuning JSON model having uppercase key names. In my case, the JSON I was returning looked like this:

{
    ClassName: "3rd Grade - Thompson",
    SubjectID: "20509",
    SubjectName: "English"
}

This JSON was causing the 'chains is undefined error to appear. In my Ember route, where I defined the model, I ran the returning JSON through the following code to make all key values lowercase:

App.GradesRoute = Ember.Route.extend({
    model: function(){
      var url = "https://URL-To-JSON-API";
      var grades = [];

      return Ember.$.getJSON(url).then(function(data){
        $.each(data, function(index, obj){
          var grade = {};
          $.each(obj, function(key, value){
            grade[key.toLowerCase()] = value;
          });
          grades.push(grade);
        });
        return grades;
      });
    }
});

Then in my handlebars code I just switched all of my key names to lowercase like so:

<script type="text/x-handlebars" id="grades">
  {{#each grade in model}}
    <p>
      {{grade.classname}}
        {{#if grade.subjectid}}
          {{grade.subjectname}}
        {{/if}}
      {{grade.number}} / {{grade.letter}}
    </p>
 {{else}}
   <p>No grades posted</p>
 {{/each}}

And it worked like a charm. Hope this helps someone. I know I spent a good few hours trying to figure this out, hopefully I can spare someone else the trouble.

Answer 3

您最有可能在{{if}}子句的名称空间中，因此它的行为有所不同。