1

これはかなり基本的なことですが、テンプレートの#eachループ内でHandlebarsの組み込みの#ifヘルパーを使用できないように見える理由を理解するために何時間も費やしました。2番目に{{#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には、「content」内の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 に答える