Ember.js 在我的把手模板中的每个循环中使用#if in my#都会导致浏览器页面崩溃

这是非常基本的，但我花了几个小时试图弄明白为什么我不能在我的模板的每个循环中使用Handlebar内置的if helper。第二次我插入了对{{#if}的引用，Chrome（或Safari）崩溃，控制台报告：

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

（重复多次）

为什么这会导致我在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>

{{{#内容中的每个项目}
{{{if item.hilight}
...
{{else}
...
{{/if}
{{/每个}}

即使{{#if}}语句什么也不做，也会发生这种情况

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

{{{#内容中的每个项目}
{{{{{}}{{/if}}//这行代码会立即导致“oh snap”崩溃
{{item.name}
{{/每个}}

关联的ArrayController在“内容”中包含一个包含5个余烬对象的简单列表，在插入#if之前，模板工作正常。

---

莫名其妙

您的代码似乎没有任何问题。可能是您的ember版本中的错误，或者可能是支持库（Handlebar/jQuery）的不兼容版本。要么是这样，要么是应用程序的其他方面发生了一些疯狂的事情

我创建了一个简单的应用程序/控制器，并使用它在这里启动和运行您的模板代码：-在chrome和safari中都尝试过，在这两种情况下，应用程序都不会出现js错误

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

//app.js
App=Ember.Application.create（{}）；
App.IndexRoute=Ember.Route.extend({
设置控制器：功能（控制器）{
controller.set（'content'[
create（{name:'aaa'，hilight:false}），
create（{name:'BBB'，hilight:true}），
create（{name:'ccc'，hilight:false}）
]);
}
});
//index.hbs

{{{#内容中的每个项目}
{{{if item.hilight}
{{item.name}
{{else}
{{item.name}
{{/if}
{{/每个}}

您的代码似乎没有任何问题。可能是您的ember版本中的错误，或者可能是支持库（Handlebar/jQuery）的不兼容版本。要么是这样，要么是应用程序的其他方面发生了一些疯狂的事情

我创建了一个简单的应用程序/控制器，并使用它在这里启动和运行您的模板代码：-在chrome和safari中都尝试过，在这两种情况下，应用程序都不会出现js错误

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

//app.js
App=Ember.Application.create（{}）；
App.IndexRoute=Ember.Route.extend({
设置控制器：功能（控制器）{
controller.set（'content'[
create（{name:'aaa'，hilight:false}），
create（{name:'BBB'，hilight:true}），
create（{name:'ccc'，hilight:false}）
]);
}
});
//index.hbs

{{{#内容中的每个项目}
{{{if item.hilight}
{{item.name}
{{else}
{{item.name}
{{/if}
{{/每个}}

非常感谢。这有助于我缩小范围。我会继续调查。。。你最初的猜测有可能是正确的——我加入的团队正在使用几个版本的库——也许它们已经坏了。谢谢。这里有一点猜测，因为我们没有最终确定发生了什么，但似乎这可能是由动态加载和编译模板文件以及在我们看来对模板的陈旧硬编码引用引起的。不知何故，我认为这在某些情况下会建立一个递归循环，但为什么#if会触发它还不清楚，但在删除对模板的硬编码引用后，事情似乎如预期的那样进行。非常感谢。这有助于我缩小范围。我会继续调查。。。你最初的猜测有可能是正确的——我加入的团队正在使用几个版本的库——也许它们已经坏了。谢谢。这里有一点猜测，因为我们没有最终确定发生了什么，但似乎这可能是由动态加载和编译模板文件以及在我们看来对模板的陈旧硬编码引用引起的。不知何故，我认为这在某些情况下会建立一个递归循环，但为什么#if会触发它还不清楚，但在删除对模板的硬编码引用后，事情似乎按照预期进行。