22

Ember.js アプリのナビゲーションに Twitter Bootstrap を使用しています。Bootstrap は、リンク自体にクラスを設定するのではなく、ナビゲーション リンクをラップactiveするタグにクラスを使用します。liactive

Ember.js の新しいlinkToヘルパーはactiveリンクにクラスを設定しますが、(私が見る限り) そのプロパティにフックするものは何も提供していません。

現在、私はこの醜いアプローチを使用しています：

{{#linkTo "inbox" tagName="li"}}
  <a {{bindAttr href="view.href"}}>Inbox</a>
{{/linkTo}}

これは出力されます：

<li class="active" href="/inbox"><a href="/inbox">Inbox</a></li>

これは私が望むものですが、有効な HTML ではありません。

親ビューから生成されたLinkViewのactiveプロパティへのバインドも試みましたが、そうすると、親ビューが挿入される前に2回レンダリングされ、エラーが発生します。

linkToクラスをリンクに割り当てるためにヘルパーが内部的に使用するロジックを手動で再作成する以外activeに、この効果を達成するためのより良い方法はありますか?

4

9 に答える 9

27

より一般的で恒久的な解決策が必要なことは間違いありませんが、今のところはこのような方法でうまくいくはずです。

テンプレート:

<ul>
{{#view App.NavView}}
  {{#linkTo "about"}}About{{/linkTo}}
{{/view}}

{{#view App.NavView}}
  {{#linkTo "contacts"}}Contacts{{/linkTo}}
{{/view}}
</ul>

ビューの定義:

App.NavView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});

これは、いくつかの制約に依存しています。

  • nav ビューには、単一の静的な子ビューが含まれています
  • のビューを使用できます<li>。ビューの要素をその JavaScript 定義またはハンドルバーからカスタマイズする方法については、ドキュメントに多くの詳細があります。

この作業のライブ JSBinを提供しました。

于 2013-01-14T23:49:32.843 に答える
9

さて、私は @alexspeller の素晴らしいアイデアを採用し、それを ember-cli に変換しました。

アプリ/コンポーネント/link-li.js

export default Em.Component.extend({
    tagName: 'li',
    classNameBindings: ['active'],
    active: function() {
        return this.get('childViews').anyBy('active');
    }.property('childViews.@each.active')
});

私のナビゲーションバーには次のものがあります：

{{#link-li}}
    {{#link-to "squares.index"}}Squares{{/link-to}}
{{/link-li}}
{{#link-li}}
    {{#link-to "games.index"}}Games{{/link-to}}
{{/link-li}}
{{#link-li}}
    {{#link-to "about"}}About{{/link-to}}
{{/link-li}}
于 2014-07-26T16:22:32.060 に答える
8

ネストされたリンク先を使用することもできます:

{{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content tagName='li' href=false eventName='dummy'}}
  {{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content}}Info{{/link-to}}
{{/link-to}}
于 2013-09-02T13:50:31.533 に答える
6

katz の回答に基づいてactive、nav 要素parentViewがクリックされたときにプロパティを再計算することができます。

App.NavView = Em.View.extend({

    tagName: 'li',
    classNameBindings: 'active'.w(),

    didInsertElement: function () {
        this._super();
        var _this = this;
        this.get('parentView').on('click', function () {
            _this.notifyPropertyChange('active');
        });
    },

    active: function () {
        return this.get('childViews.firstObject.active');
    }.property()
});
于 2013-01-30T20:10:31.707 に答える
2

内部で使用されているロジックを再作成しました。他の方法はよりハックに見えました。これにより、配線が不要な場所でロジックを再利用しやすくなります。

こんな感じで使用。 

{{#view App.LinkView route="app.route" content="item"}}{{item.name}}{{/view}}

App.LinkView = Ember.View.extend({
    tagName: 'li',
    classNameBindings: ['active'],
    active: Ember.computed(function() {
      var router = this.get('router'),
      route = this.get('route'),
      model = this.get('content');
      params = [route];

      if(model){
        params.push(model);
      }

      return router.isActive.apply(router, params);
    }).property('router.url'),
    router: Ember.computed(function() {
      return this.get('controller').container.lookup('router:main');
    }),
    click: function(){
        var router = this.get('router'),
        route = this.get('route'),
        model = this.get('content');
        params = [route];

        if(model){
            params.push(model);
        }

        router.transitionTo.apply(router,params);
    }
});
于 2013-01-24T19:34:49.373 に答える
1

ビューの拡張をスキップして、以下を使用できます。

{{#linkTo "index" tagName="li"}}<a>Homes</a>{{/linkTo}}

href がなくても、Ember.JS は LI 要素にフックする方法を知っています。

于 2014-02-26T16:08:03.517 に答える
0

ここでの同じ問題について、パフォーマンスの低下についてはわからないjQueryベースのソリューションを使用しましたが、そのまま使用できます。Ember.LinkView を再度開いて拡張しました。

Ember.LinkView.reopen({
    didInsertElement: function(){
        var el = this.$();

        if(el.hasClass('active')){
            el.parent().addClass('active');
        }

        el.click(function(e){
            el.parent().addClass('active').siblings().removeClass('active');
        });
    }
});
于 2013-09-01T05:18:29.540 に答える
0

執筆時点での現在の回答は日付が付けられています。それ以降のバージョンの Ember を使用している場合、現在のルートがターゲット リンクと一致すると、要素にクラスが{{link-to}}自動的に設定されます。'active'<a>

したがって、css を記述するだけで、すぐに使用できるように<a>なるactiveはずです。

機能が追加されたのはラッキーです。この「問題」を以前に解決するために必要だったものはすべて、かなりばかげています。

于 2014-07-09T22:49:17.047 に答える