Question

这是非常基本的，但我花了几个小时试图找出为什么我似乎无法在我的模板的#each循环中使用Handlebars的内置#if帮助器。第二个我插入对{{#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}}语句不执行任何操作，也会发生这种情况。

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

关联的ArrayController在“内容”中包含5个Ember对象的简单列表，模板工作正常，直到我插入#if。百思不得其解。

Answer 1

您的代码似乎没有任何问题。可能是您的ember版本中的错误，也可能是支持库（handlebars / jQuery）的不兼容版本。在你的应用程序的其他方面，这或者是疯狂的事情。

我创建了一个简单的应用程序/控制器并用它来启动并运行模板代码：http://jsbin.com/ekemak/2/edit - 尝试使用chrome和safari，在这两种情况下，app都可以运行，没有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>

在我的Handlebars模板中的#each循环中使用#if会导致浏览器页面崩溃

1 个答案: