5

Bootstap.Tabs コンポーネントを使用して、いくつかのブートストラップ タブを作成しようとしています。

タブを次のように宣言しました。

{{view Bootstrap.Tabs
  contentBinding="App.tabsContent"
  selectionBinding="App.selection"}}

そして、次のコードを使用してタブのコンテンツを設定しています。

App.ready = function() {
  App.tabsContent= Ember.A([{value: "cred_app.associate_clients", title: "Associate clients"}, {value: "cred_app.facilities", title: "Facilities"}]);    
};

これを使用して、ブートストラップ タブを正常にレンダリングできます。ルート名がApp.selectionにポップアップ表示されます。

リンクを機能させる方法がわからないため、コントローラーがルートに移行します。また、現在表示されているルートがタブに表示されるように、アクティブなタブに正しい css を適用したいと思います。

アップデート：

より単純化したアプローチを使用してこれを実装しました。

<ul class='nav-tabs'>
  {{#linkTo 'cred_app.associate_clients' model tagName='li' href=false}}
    {{#linkTo 'cred_app.associate_clients' model}}Client Hierachy{{/linkTo}}
  {{/linkTo}}
</ul>
4

2 に答える 2

3

次のようなことができます: (派生したBootstrap.Tabs実装を使用)

{{#view Bootstrap.TabContainerView currentView="patient"}}
  <ul class="nav nav-tabs">
    {{#view Bootstrap.TabView value="patient"}}<a>Patient</a>{{/view}}
    {{#view Bootstrap.TabView value="visits"}}<a>Visits</a>{{/view}}
    {{#view Bootstrap.TabView value="contacts"}}<a>Contacts</a>{{/view}}
    {{#view Bootstrap.TabView value="sessions"}}<a>Sessions</a>{{/view}}
   </ul>
   {{#view Bootstrap.TabPaneView viewName="patient"}}
     {{render "patient"}}
   {{/view}}
   {{#view Bootstrap.TabPaneView viewName="visits"}}
     {{render "visits"}}
   {{/view}}
   {{#view Bootstrap.TabPaneView viewName="contacts"}}
     {{render "contacts"}}
   {{/view}}
   {{#view Bootstrap.TabPaneView viewName="sessions"}}
     {{render "sessions"}}
   {{/view}}
{{/view}}

またはルーターを使用する：

<ul class="nav nav-tabs">
  {{#view Bootstrap.TabItem item="patient"}}
    {{#linkTo "tab.patient" content}}Patient{{/linkTo}}
  {{/view}}
  {{#view Bootstrap.TabItem item="visits"}}
    {{#linkTo "tab.visits" content}}Visits{{/linkTo}}
  {{/view}}
  {{#view Bootstrap.TabItem item="contacts"}}
    {{#linkTo "tab.contacts" content}}Contacts{{/linkTo}}
  {{/view}}
  {{#view Bootstrap.TabItem item="sessions"}}
    {{#linkTo "tab.sessions" content}}Sessions{{/linkTo}}
  {{/view}}
</ul>
{{outlet}}

魔法はBootstrap.TabItemによって行われ、linkToヘルパーからアクティブな状態を取得します

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

  activeChanged: function () {
    var self = this;
    Ember.run.next(this, function () { //delay
      if (!self.isDestroyed) {
        self.set('active', self.get('childViews.firstObject.active'));
      }
    });
  }.observes('childViews.firstObject.active') //get the active state from the linkTo helper
});

これで、次のようなルーターのみが必要になります。

App.Router.map(function (match) {
  ...
  this.resource('tab', { path: '/tab' }, function () {
    this.route('patient');
    this.route('visits');
    this.route('contacts');
    this.route('sessions');
  });
  ...
});

jsFiddle が役立つ場合があります

于 2013-02-07T07:45:53.203 に答える
1

EmberのBootstrapを見てください

ピルとタブを完全にサポートしています。

https://github.com/ember-addons/bootstrap-for-ember

ショーケース: ember-addons.github.io/bootstrap-for-ember

于 2013-08-31T00:06:05.393 に答える