CODEWITHSUNDEEP
ember.jshandlebars.js
J Sprague
J Sprague

Reputation: 1038

Any use of #if inside my #each loop in my Handlebars template causes the browser page to crash

This is pretty basic, but I've spent hours trying to figure out why I can't seem to use Handlebars's built-in #if helper inside the #each loop of my template. The second I insert a reference to {{#if}}, Chrome (or Safari) crash and the console reports: 

Uncaught RangeError: Maximum call stack size exceeded
meta
targetSetFor 
sendEvent
Ember.Evented.Ember.Mixin.create.trigger
Ember.CoreView.Ember.Object.extend.trigger
newFunc
(anonymous function)
Ember.View.Ember.CoreView.extend.invokeRecursively
newFunc

(repeats many times)

Why is this causing me a recursion fault in Ember? 

<div id="gridChannelListDiv" tabindex="0">
{{#each item in content}}
    {{#if item.hilight}}
        <div class="gridCellHilight">
            ...
        </div>
    {{else}}
        <div class="gridCell">
            ...
        </div>
    {{/if}}
{{/each}}
</div>

This happens even if the {{#if}} statement does nothing.

<div id="gridChannelListDiv" tabindex="0">
{{#each item in content}}
    {{#if}}{{/if}}   // this line will cause instant "oh snap" crash

    <div class="gridCell">
        {{item.name}}
    </div>
{{/each}}
</div>

The associated ArrayController contains a simple list of 5 Ember objects in "content" and the templates work fine until I insert an #if. Baffled.

Upvotes: 1

Views: 3811

Answers (1)

Mike Grassotti
Mike Grassotti

Reputation: 19050

There does not seem to be anything wrong with your code. Could be a bug in your version of ember or perhaps an incompatible version of a supporting library (handlebars/jQuery). Either that or something crazy going on in some other aspect of your application.

I created a simple app/controller and used it to get your template code up and running here: http://jsbin.com/ekemak/2/edit - Tried in both chrome and safari, in both cases app works with no js errors.

//app.js
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', [
      Em.Object.create({name: 'aaa', hilight: false}),
      Em.Object.create({name: 'BBB', hilight: true}),
      Em.Object.create({name: 'ccc', hilight: false})
    ]);
  }
});


//index.hbs
<ul>
{{#each item in content}}
  {{#if item.hilight}}
    <div class="gridCellHilight">
        <B>{{item.name}}</B>
    </div>
  {{else}}
    <div class="gridCell">
        {{item.name}}
    </div>
  {{/if}}
{{/each}}   
</ul>

Upvotes: 2

Related Questions