8

特定のルートがアクティブな場合にのみ、Ember ハンドルバーでブロックをレンダリングしたい。では、「linkTo」ヘルパーの「アクティブ」クラスと同じ条件で「ifRoute」ヘルパーを作成するにはどうすればよいでしょうか。

2 層のナビゲーションがあるため、これが必要です。そのため、ヘッド ナビゲーション ポイントがアクティブな場合は、サブ ナビゲーションのみを表示したいと考えています。遅延読み込みを使用し、ヘッド ナビゲーション ポイントがアクティブなときにのみサブ ナビゲーションを読み込みたいため、「アクティブ」クラスを使用したくありません。

だから、私がやりたいことは次のとおりです。

<ul>
    {{#each assortmentGroups}}
        <li>
            {{#linkTo "assortmentGroup" this}} {{description}} {{/linkTo}}
            {{#ifRoute "assortmentGroup" this}}
                <ul>
                    {{#each itemCategories}}
                        <li>{{#linkTo "itemCategory" this}} {{description}} {{/linkTo}}</li>
                    {{/each}}
                </ul>
            {{/ifRoute}}
        </li>
    {{/each}}
<ul>

どうすればこれを行うことができますか、またはより良い解決策がありますか?

ありがとう

4

4 に答える 4

8

コントローラーに追加するだけです：

needs: ['application'], 
isCorrectRouteActive: Ember.computed.equal('controllers.application.currentRouteName', 'correctRoute')

同様に：

isCorrectPathActive: Ember.computed.equal('controllers.application.currentPath', 'correct.path')
isCorrectURLActive: Ember.computed.equal('controllers.application.currentURL', 'correctURL')

最新のEmberが残りを行うと確信しています

于 2014-06-28T06:40:59.583 に答える
4

可能なオプションは 2 つありますが、どちらの場合も、必要なときにいつでもアクセスできるように、最初に を保存する必要がありますcurrentPath。ApplicationController

var App = Ember.Application.create({
  currentPath: ''
});

App.ApplicationController = Ember.ObjectController.extend({
  updateCurrentPath: function() {
    App.set('currentPath', this.get('currentPath'));
  }.observes('currentPath')
});

計算されたプロパティの使用

次に、テンプレートをバックアップするコントローラーでNavigationController、計算されたプロパティを作成ApplicationControllerし、needsAPI を使用してアクセスを収集する依存関係も定義し、CP で必要なものかどうかを確認するcurrentPathとします。

App.NavigationController = Ember.Controller.extend({
  needs: 'application',
  showSubMenu: function(){
    var currentPath = this.get('controllers.application.currentPath');
    return (currentPath === "assortmentGroup");
  }.property('controllers.application.currentPath')
});

{{#if}}したがって、テンプレートで単純なヘルパーを使用できます。

...
{{#linkTo "assortmentGroup" this}} {{description}} {{/linkTo}}
  {{#if showSubMenu}}
    <ul>
      {{#each itemCategories}}
        <li>{{#linkTo "itemCategory" this}} {{description}} {{/linkTo}}</li>
      {{/each}}
    </ul>
  {{/if}}
</li>
...

カスタム '{{#ifRoute}}' ヘルパーの使用

ただし、カスタム ヘルパーで条件を処理する必要がある場合は、次の方法で実行できますcurrentPath。現在のルートの値を取得する方法が必要なため、アプリケーションに保存されている が引き続き必要であることに注意してください。

Ember.Handlebars.registerHelper('ifRoute', function(value, options) {
  if (value === App.get('currentPath')) {
    return options.fn(this);
  }
  else {
    return options.inverse(this);
  }
});

そして、次のように使用できます。

...
  {{#linkTo "assortmentGroup" this}} {{description}} {{/linkTo}}
  {{#ifRoute "assortmentGroup"}}
    <ul>
      {{#each itemCategories}}
        <li>{{#linkTo "itemCategory" this}} {{description}} {{/linkTo}}</li>
      {{/each}}
    </ul>
  {{/ifRoute}}
</li>
...

「カスタム ヘルパー」ソリューションの簡単なデモも参照してください: http://jsbin.com/izurix/7/edit

注: 2 番目の解決策には問題があります。ヘルパーはブロックをサポートしていないためbound(Embers ハンドルバーのカスタマイズで)、バインディングに応じて条件を再評価しない単純なヘルパーを使用しましたが、これは必要なものではない場合があります。

それが役に立てば幸い。

于 2013-08-12T16:24:39.287 に答える
1

linkTo の ember コードと if ヘルパー、intuitivepixel からの回答、および独自のバインドされたブロック ヘルパーの作成に関するブログ投稿を調査した後、解決策を見つけました。

var resolveParams = Ember.Router.resolveParams;

var resolvedPaths = function(options) {
    var types = options.options.types.slice(1),
    data = options.options.data;

    return resolveParams(options.context, options.params, { types: types, data: data });
};

Ember.Handlebars.registerHelper('ifRoute', function(name) {
    var options = [].slice.call(arguments, -1)[0];
    var params = [].slice.call(arguments, 1, -1);
    var theResolvedPaths = resolvedPaths({ context: this, options: options, params: params });
    var router = options.data.keywords.controller.container.lookup('router:main');

    var self = this;
    var evaluateIsCurrentRoute = function() {
        self.set('current_route_is_active_bool_for_ifroute', (function() {
            return router.isActive.apply(router, [name].concat(theResolvedPaths)) ||
                router.isActive.apply(router, [(name + '.index')].concat(theResolvedPaths));
        })());
    };

    evaluateIsCurrentRoute();
    router.addObserver('url', evaluateIsCurrentRoute);

    options.contexts = null;

    return Ember.Handlebars.helpers.boundIf.call(this, 'current_route_is_active_bool_for_ifroute', options);
});
于 2013-08-13T12:22:58.020 に答える