如何正确使用ember-bootstrap项目中的Bootstrap.Tabs？

Question

我正在尝试使用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>

Answer 1

你可以这样做：（使用我派生的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 可能有帮助