10

テンプレートで、各ブロック内で親コンテキストの値に対して if ブロックを使用したい状況があります。

コード：

App = Ember.Application.create({});

App.view = Ember.View.extend({
    foo: [1, 2, 3],
    bar: true
});

テンプレート:

<script type="text/x-handlebars">
{{#view App.view}}
    {{#each foo}}
        {{#if bar}}
            {{this}}
        {{/if}}
    {{/each}}
{{/view}}
</script>

each ループ内で参照される名前は反復の要素にスコープされるため、これは機能しません。親コンテキストで物事をどのように参照しますか?

デモ: http://jsfiddle.net/hekevintran/sMeyC/1/

4

4 に答える 4

11

より良い解決策を見つけました。

Ember.js ビュー レイヤー ガイド ( http://emberjs.com/guides/understanding-ember/the-view-layer/ ) から:

Ember のハンドルバー ヘルパーは、変数を指定することもできます。たとえば、{{#with controller.person as tom}} フォームは、子孫スコープがアクセスできる tom 変数を指定します。子コンテキストに tom プロパティがある場合でも、tom 変数がそれを置き換えます。

このフォームには大きな利点が 1 つあります。それは、親スコープへのアクセスを失わずに長いパスを短縮できることです。

これは、{{#each person in people}} フォームを提供する {{#each}} ヘルパーで特に重要です。この形式では、子孫コンテキストは person 変数にアクセスできますが、テンプレートが each を呼び出した場所と同じスコープにとどまります。

テンプレート:

<script type="text/x-handlebars" >
    {{#view App.view}}
        {{#each number in view.foo}}
            {{#if view.bar}}
                {{number}}
            {{/if}}
        {{/each}}
    {{/view}}
</script>​

デモ: http://jsfiddle.net/hekevintran/hpcJv/1/

于 2012-05-23T01:53:48.807 に答える
5

hekevintran の答えが意味することは、を使用して任意の変数の名前を変更できるということです#with。JavaScript でも同様の問題がありますthis。JavaScript では、回避するためにこのようなコードを目にすることがあります。

var self = this;
doSomething(function() {
  // Here, `this` has changed.
  if (self.bar) {
    console.log(this);
  }
});

Ember フレーバーのハンドルバーでは、似たようなことがview. App.MyOuterView とその中に別のビューがあるとします。このように回避できます。

{{#with view as myOuterView}}
  {{#each foo}}
    {{#if myOuterView.bar}}
      {{this}}
    {{/if}}
  {{/each}}
{{/with}}

JavaScript と同様に、基本的に名前viewを別の名前に変更できるため、内部ビューによって影が薄くなりません。 {{#each person in people}}はその特殊なケースにすぎません。ただし、使用して名前を変更すること{{#with view as myView}}は、この問題に対するより一般的な解決策/回避策であり、viewヘルパーへのネストされた呼び出しでも機能します。

于 2013-07-20T01:25:45.887 に答える
2

これには私もビックリしました。このスレッドとこの他のスレッド ( Using a container view in ember.js - how to access parent variables from child view ) が解決に役立ちました。Jonathan の提案を使用して {#with} を実行し、コントローラーを呼び出して変数にアクセスする必要があることもわかりました。私は次のように働きました：

// I use the #which command to preserve access to the outer context once inside the #each
{{#with view as myOuterView}}
  {{#each myInnerArray}}
    //here, i get my 'name' property from the *controller* of myOuterView
    {{myOuterView.controller.name}}
    // stuff i did in inner array
  {{/each}
{{/with}
于 2014-02-14T22:11:23.017 に答える
0

ifそもそも内部を配置する必要はありませんeach:

<script type="text/x-handlebars">
  {{#view App.view}}
    {{#if view.bar}}
      {{#each view.foo}}
        {{this}}
      {{/each}}
    {{/if}}
  {{/view}}
</script>

デモ: http://jsfiddle.net/ppanagi/NQKvy/35/

于 2013-07-20T17:15:13.393 に答える