1

这是非常基本的，但我花了几个小时试图弄清楚为什么我似乎无法在我的模板的#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。莫名其妙。

4

1 回答 1

1

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

我创建了一个简单的应用程序/控制器并使用它来让您的模板代码在此处启动并运行：http: //jsbin.com/ekemak/2/edit - 在 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>
于 2013-03-19T05:28:22.437 回答