3

ナビゲーションを接続して、どのナビゲーション項目がアクティブかを表示する方法を考え出そうとしています。ここにビューがあります：

  <script type="text/x-handlebars" data-template-name="nav">
  <ul class="nav">
    <li>{{#linkTo "index"}}Index{{/linkTo}}</li>
    <li>{{#linkTo "lunches"}}Lunches{{/linkTo}}</li>
    <li>{{#linkTo "people"}}People{{/linkTo}}</li>
  </ul>
  </script>

私は Bootstrap を使用しており、bootstrap は <a> ではなく <li> に「アクティブな」クラスを配置します。Ember はデフォルトで <a> に配置します。アクティブなルートを取得してこのビューに適用するために、あらゆる種類のことを試しました（手動で値を設定し、handlebars.helper で適用しようとしましたが、メタモーフの混乱でした）。

ここで「正しい」Emberの方法は何ですか?

私は次の 3 つの主要なポイントすべてで迷子になっていることを告白します。

  1. ルートから値を取得する
  2. Route からビューに値を移動する (またはバインドする)
  3. タグにメタモルフなしで値を属性として表示する

明らかに、ここで多くの根本的な誤りを犯しています。誰かが私を正しくしてくれませんか。

4

3 に答える 3

1

これは難しい問題のように思えるので、完璧な答えを出すことはできません。しかし、Twitter Bootstrap と Ember の統合を目指すプロジェクトがあります。ember-bootstrapを見てください。完全な統合ではありませんが、NavListの実装も提供します。まだ linkTo ヘルパーを使用していないと思いますが、比較的簡単に実行できるはずです。

これが選択肢にない場合は、アンカーを li 要素でラップするために linkTo ヘルパーの拡張バージョンを作成するオプションしか表示されませんが、これも非常に簡単ではありません。

于 2013-03-21T20:53:13.273 に答える
0

これが私がやったことです。動作しますが、複雑すぎるように見えるので、根本的な欠陥があると思われます。修正および/または改善は大歓迎です。

ナビゲーション バーを作成するビューは次のとおりです。

  <script type="text/x-handlebars" data-template-name="nav">
    <ul class="nav">
      {{#each navs}}
          <li {{bindAttr class="isActive:active"}}><a href="#" {{action select link}}> {{title}}</a></li>
      {{/each}}
    </ul>
  </script>

そして、これを駆動するための膨大な量のコードがあります:)

App.ApplicationController = Ember.Controller.extend({
    active: 'index'
}); 


App.ApplicationRoute = Ember.Route.extend({
    setupController: function(){
        var active = this.controllerFor('application').get('active');
        this.controllerFor('nav').set('model',{
            active:'index',
            navs: [
                { link:"index",   title:'Toad',    isActive: active === 'index' },
                { link:"lunches", title:'Lunches', isActive: active === 'lunches' },
                { link:"people",  title:'People',  isActive: active === 'people' }
            ]
        });
    },
    events: {
        select: function (item) {
            var nav = this.controllerFor('nav');
            var app = this.controllerFor('application');
            app.set('active',item);
            var active = app.get('active');
            var navs = nav.get('navs');
            new_navs = [];
            for (var i = navs.length - 1; i >= 0; i--) {
                new_navs[i] = { link: navs[i].link, title: navs[i].title, isActive: active === navs[i].link} ;
            };
            nav.set('navs',new_navs);
            this.transitionTo(item);
        }
    }
});

App.NavController = Ember.ObjectController.extend({

});


// Routes

App.Router.map(function() {
  this.route("people");
  this.route("lunches");
});

App.PeopleRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this.send('select','people');
        controller.set('people', App.People.find());
    },
});

App.LunchesRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this.send('select','lunches');
        controller.set('lunches', App.Event.find());
    },
});

お願い、頑張ってこれをバラバラにして、私を正して！

于 2013-03-26T13:22:53.893 に答える