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 回答