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可能有帮助

Answer 2

请查看 Ember的Bootstrap

它完全支持Pills＆amp;标签：

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

展示：ember-addons.github.io/bootstrap-for-ember

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

2 个答案: